Nova™

Extensions

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 and yaml 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.