PyCharm provides intelligent support for the Vue.js framework including:
- Recognition of the
- Support for
.vuefiles. PyCharm by default provides code completion for ECMAScript 6 inside script blocks and for CSS inside style block. PyCharm also recognizes the
langattribute inside the
styletags and allows you to use TypeScript, Pug, and CSS preprocessors instead.
- Completion for Vue directives in templates.
- Code completion (Ctrl+Space and navigation (Ctrl+B) for Vue components inside the
Before you start
Before you start, install and enable the Vue.js plugin. The plugin is not bundled with PyCharm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
Working with Vue.js
- Just open an existing project. All Vue.js-related features will work without any additional configuration. To get better code completion for Vue API, install the
vuepackage in your project via npm if it is not installed yet: open the built-in PyCharm Terminal (press Alt+F12 or choose on the main menu) and type
npm install vueat the command prompt.
- Alternatively, follow the Vue.js installation instructions.