- Vue
- Vue syntax and Vue Language Server for Nova editor.
- 36755 Installs
-
This extension is allowed to:
- Read & Write Files
- Launch Subprocesses
Readme
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!
Prerequisites
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.
Volar setup
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 vls@0.7.4
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.
Usage
Enable the extension in the extension library within Nova. Enjoy.
Features
Vue syntax 🖋
Vue for Nova defines the syntax for .vue
files.
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.
Contributing 🤝
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 Vue.novaextension
.
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!
Changelog
Version 7.1
IMPROVE
- Upgrade @volar/vue-language-server to v1.0 by @johnsoncodehk in #54
Version 7.0
FEATURE
- 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 Vue (Compatibility)
.\
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
.
Version 6.2
FIX
- Fix a bug that prevented the reload function to execute
Version 6.1
IMPROVE
- Add better error messages and notifications when something goes wrong with language server activation
FIX
- Disable custom Volar LSP requests
- Fix minor issues with console outputs when errors occur
Version 6.0
FEATURE
- 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
json
andyaml
formats
IMPROVE
- Simplify and speed up the extension by removing not so useful features and improving the code quality
Version 5.4
FIX
- Fix syntax detection of alternatives languages in style and script tags
Version 5.3
FIX
- Fix wrong version of VLS in production
Version 5.2
FIX
- Add missing Vue tags in scope selectors
- Add missing support for PUG syntax
Version 5.1
FIX
- Rolling back to VLS v0.5.7 because of issues with setting registration
Version 5.0
FEAT
- Display Vue version in the Information Sidebar
IMPROVE
- 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
CHORE
- Upgrade development dependencies
Version 4.2
FIX
- Added missing highlighting for Nuxt unique kebab-case tags
Version 4.1
FIX
- Reverted VLS version to 0.5.7 for unknown breaking issues
Version 4.0
NEW
- 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
- 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
DOCS
- Improved the general quality and structure of the README
- Add a new Help section with some troubleshooting information
Version 3.4
FIX
- Removed single template block syntax which causes problems in Nova 4
Version 3.3
FIX
- Fixed broken single template block syntax in Nova 4
Version 3.2
FIX
- Fixed broken script and style blocks syntax in Nova 4
Version 3.1
DOCS
- Added warning for Nova crash without pug extension
Version 3.0
FEATURE
- Added support for PUG syntax
Version 2.3
CHORE
- Upgrade VLS to v0.5.7
Version 2.2
FEATURE
- Added the extension icon
Version 2.1
FIX
- Fixed syntax error with v-directives cut-off
Version 2.0
FEATURE
- Added support for template interpolation suggestions
- Configured Vetur for using workspace dependencies
- Typescript: Auto import completions
CHORE
- Upgrade VLS to v0.5.5
FIX
- Closed Vetur format until Nova will support it
- Closed Vetur validation for preventing xxx errors to show up
Version 1.5
FIX
- Changed cut-off expression for v-directives that could cause the js block to not end correctly
Version 1.4
REFACTOR
- Changed how template tag is parsed
- Improved symbols definition for vue elements
FIX
- Supported nested template tags
Version 1.3
FEATURE
- Added Vue specific styling hooks for Nova themes
DOCS
- Added funding link in Extension Settings
Version 1.2
Chore
- Changed default mode for the extension
- Updated the help link for mode config
Version 1.1
Fix
- Upload the DOCS changes
Version 1.0
Feature
- Add the Vetur mode 🔥
Version 0.9.1
Fix
- Removed forgotten preference in the extension definition.
Version 0.9.0
Feature
- 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.
Version 0.8.2
Fix
- Added different definitions for vue-directives single and double quoted in order to prevent errors with nested quotes
Version 0.8.0
Feature
- Added support for typescript and coffeescript
- Added support for scss, sass, less
Fix
- Added missing equal-sign to v-for completion
Version 0.7.1
Docs
- Updated README with current state of development
Version 0.7.0
Feature
- Added Completions in vue-html for events, triggered by @ shorthand.
Fix
- Changed vue-html syntax to encapsulate javascript inside vue-directives quotes.
Refactor
- Changed Vue Completions structure to follow the Official API structure.
Version 0.6.2
- Added support for npm packages.
- Removed no longer needed completions thanks to a bug fix from Panic.
Version 0.6.1
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.
Version 0.6.0
Added support for standard HTML, CSS, JS and WebAPI Completions.
Version 0.5.1
Updated CHANGELOG with previous versions.
Version 0.5.0
Added Completions for Vue API.
Version 0.4.0
Basic features of Vue Syntax: custom tags, directives, interpolation.
License
MIT License
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.
Help
Troubleshooting 🧑⚕️
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.