Better Vue support in Themes 🎨

Get Help
1

Better Vue support in Themes :art:

Hi everyone!

For all Nova Theme’s curators out there I recently refined the selectors of Vue syntax. I would love if you can consider implementing them in your themes! Its pretty easy and can provide a more pleasent experience for a lot of folks.

Example

This is an example of what can be done. You can customize vue directives, special tags, brackets and modifiers.

Schermata 2020-10-27 alle 12.30.11
Schermata 2020-10-27 alle 12.30.112304×1824 536 KB

Implementation

This example lists all the available selectors

/* Vue */

vue.html.tag.open,
vue.html.tag.close {
  color: #59be84;
}

vue.html.tag.name {
  color: #59be84;
  font-weight: bold;
}

vue.html.tag.attribute.shorthand-key {
  color: #59be84;
}

vue.html.tag.attribute.name,
vue.html.embedded.interpolation.bracket {
  color: #65c032;
  font-weight: bold;
}

vue.html.tag.attribute.argument {
  color: #59be84;
  font-weight: bold;
}

vue.html.tag.attribute.modifier {
  color: #59be84;
}

Notify the users

If you decide to offer this feature I suggest that you add your theme to this list on GitHub. Just open a pull request. :wink:

For Panic

@panic_staff Is it possible somehow to let the users conditionally activate a feature like this with a setting? I’m not sure if using a script for switching extension internals xml files can be consider a safe option… Not to mention the fact of having to mantain more than one file version.

1 Like
2

There is not currently any concept of conditionally excluding parts of theme features. Nova’s themes support the tag.framework class on tags that is mainly targeted for this area (it’s primarily used for things like PHP tags).

It’s entirely possible for us to consider adopting some of your conventions here under the tag.framework namespace, such as tag.framework.attribute.argument and such. This would make it easier for theme developers to adopt this idea in a way that’s not specific to Vue but still gives you the flexibility to adopt it. I’ll see if we can consider drafting up something soon.

1 Like