- Vue syntax and Vue Language Server for Nova editor.
- 35397 Installs
This extension is allowed to:
- Read & Write Files
- Launch Subprocesses
Vue for Nova editor
Provides Vue syntax and language server support for Panic's macOS code editor, Nova.
Now with Volar as the default language server!
The extension supports both Volar and Vetur language servers. Volar is the new officially recommended server, therefore has become also the default choice in Vue for Nova.
Since there are now two different server options, neither of them come bundled with the extension. Please follow the steps below to install the server of your choice or even both of them. You will be able to switch between the two later.
To setup the Volar server start by installing the actual server package:
npm install --global @volar/vue-language-server
After that, if you haven't already, install the typescript package:
npm install --global typescript
Global installation notice
As you may have noticed we installed both packages globally (
--global). That's because the extension will try to automatically source the executables from those locations. If you want to use instances installed somewhere else on your system you can manually specify the paths to the
vue-language-server executable and the
tsserverlibrary.js script from the Volar section of the extension preferences.
Vetur setup (legacy)
To setup the Vetur server, please install the
vls executable with the following command:
npm install --global firstname.lastname@example.org
Version lock notice
As you may have noticed we installed a specific version (
0.7.4) of the package. That's because after some tests this is the latest working version of Vetur we successfully setup in Nova. Whenever we will find other working versions we will post them here.
Global installation notice
As you may have noticed we installed the package globally (
--global). That's because the extension will try to automatically source the executable from that location. If you want to use an instance installed somewhere else on your system you can manually specify the path to the
vls executable from the Vetur section of the extension preferences.
PUG in templates
In order to use PUG in your templates, please make sure to have installed an extension that provides the syntax definition for it before running Vue for Nova. Otherwise you may encounter some crashes.
Enable the extension in the extension library within Nova. Enjoy.
Vue syntax 🖋
Vue for Nova defines the syntax for
Vue language server 🔥
A language server offers advanced code features like code completion, intellisense and so on.
You can choose between Volar or Vetur.
Vue scaffold clips 📋
Vue for Nove comes with two simple scaffolding clips. One for Vue 3 with the setup function and one for Vue 2.
Special theming 🎨
Vue for Nova offers an easy way to improve the syntax highlighting in a Vue file. Have a look!
All themes which support this feature are listed here.
If you are a theme curator interested in implementing this feature, please check out the available hooks here.
Everyone interested is more than welcomed to contribute to the extension!
All you have to do to get up and running with the development is to fork the GitHub repository, downloaded it locally on your machine and rename the folder to
After that open the extension folder with Nova and in the extension menu click on
Activate Project as Extension (if you don't see the command you may have to check the relative flag in the Nova general settings). That's it!
Thanks in advance!
- Upgrade @volar/vue-language-server to v1.0 by @johnsoncodehk in #54
- Add a new tree-sitter based syntax for Vue files
- Support graphql blocks (requires external syntax extension)
NOTES ON THE NEW SYNTAX
The new tree-sitter based syntax is pretty much a one-to-one porting of the old one. However it comes with some caveats:
- PUG in templates will not be supported due to the new way of managing template blocks
- Coffeescript, SCSS, SASS and Less syntaxes are not yet supported. They will start working automatically as soon as Panic converts them to tree-sitter
- Under the hood the old syntax will still be shipped for backwards compatibility until Panic ends support
Missing syntaxes workaround:
If Coffeescript, SCSS, SASS or Less are essential to your workflow you can use the old syntax shipped as
By default a
.vue file will use the new tree-sitter syntax so you have to set a custom file type rule in the settings
Settings -> Files -> Custom Types.
- Fix a bug that prevented the reload function to execute
- Add better error messages and notifications when something goes wrong with language server activation
- Disable custom Volar LSP requests
- Fix minor issues with console outputs when errors occur
- Support the new Volar language server. Check the README for the new required installation process
- Switch between the Volar and Vetur servers
- Support the i18n tag in the Vue file. Both in the
- Simplify and speed up the extension by removing not so useful features and improving the code quality
- Fix syntax detection of alternatives languages in style and script tags
- Fix wrong version of VLS in production
- Add missing Vue tags in scope selectors
- Add missing support for PUG syntax
- Rolling back to VLS v0.5.7 because of issues with setting registration
- Display Vue version in the Information Sidebar
- Upgrade Vue Language Server to version v0.7.4
- Greatly improve Vue syntax long-term maintainability by using template-scopes
- Improve syntax REGEX for better matching Vue directives
- Upgrade development dependencies
- Added missing highlighting for Nuxt unique kebab-case tags
- Reverted VLS version to 0.5.7 for unknown breaking issues
- Exposed VLS settings for both Global and per Project
- Added a new Information Sidebar
- Updated the version of VLS (0.7.2)
- Added informative notifications
- Added new commands for the extension
- Added a Clip for scaffolding a Vue file with POSTCSS
- Improved general stability and maintanability with better structure and comments
- Polished the main extension object
- Polished the VueLanguageClient class
- Uniformed all the logs, notifications and alerts
- Polished the syntax definition
- Improved the general quality and structure of the README
- Add a new Help section with some troubleshooting information
- Removed single template block syntax which causes problems in Nova 4
- Fixed broken single template block syntax in Nova 4
- Fixed broken script and style blocks syntax in Nova 4
- Added warning for Nova crash without pug extension
- Added support for PUG syntax
- Upgrade VLS to v0.5.7
- Added the extension icon
- Fixed syntax error with v-directives cut-off
- Added support for template interpolation suggestions
- Configured Vetur for using workspace dependencies
- Typescript: Auto import completions
- Upgrade VLS to v0.5.5
- Closed Vetur format until Nova will support it
- Closed Vetur validation for preventing xxx errors to show up
- Changed cut-off expression for v-directives that could cause the js block to not end correctly
- Changed how template tag is parsed
- Improved symbols definition for vue elements
- Supported nested template tags
- Added Vue specific styling hooks for Nova themes
- Added funding link in Extension Settings
- Changed default mode for the extension
- Updated the help link for mode config
- Upload the DOCS changes
- Add the Vetur mode 🔥
- Removed forgotten preference in the extension definition.
- Added scaffolding Clips based on Sarah Drasner VSCode snippets.
WARNING: The Clips even if inspired by Sarah Drasner are not exactly the same. Triggers are different and the basic Vue scaffold has no longer scss but css.
- Added different definitions for vue-directives single and double quoted in order to prevent errors with nested quotes
- Added support for typescript and coffeescript
- Added support for scss, sass, less
- Added missing equal-sign to v-for completion
- Updated README with current state of development
- Added Completions in vue-html for events, triggered by @ shorthand.
- Changed Vue Completions structure to follow the Official API structure.
- Added support for npm packages.
- Removed no longer needed completions thanks to a bug fix from Panic.
Fixed a minor bug that displayed html, css and js completions in every tag. The completions are now shown only in the corresponding vue tag.
Added support for standard HTML, CSS, JS and WebAPI Completions.
Updated CHANGELOG with previous versions.
Added Completions for Vue API.
Basic features of Vue Syntax: custom tags, directives, interpolation.
Copyright (c) 2020 Tommaso Negri
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
If you encounter some issue with the Vue Language Server you may want to try reload it. You can do that from the extension menu or from the Vue Information Sidebar.
If reloading doesn't solve your problem you may want to try restoring the defaults settings. You can do that from the extension menu or the command palette.
If none of the above solves your problems you can uninstall/reinstall the extension. That should solve any issue.