Working with Vue.js in WebStorm

Vue.js is a popular framework for creating user interfaces. Its core functionality is focused on building UI components, which is quite similar to React and Angular.

In 2017 Vue.js gained real momentum: according to the recent results of the State of JavaScript survey it’s one of the most used frameworks at the moment, and many developers are interested in learning it.

WebStorm introduced support for Vue.js at the beginning of 2017, and since then we’ve added lots of improvements.

Let’s take a look at how WebStorm (or PhpStorm, IntelliJ IDEA, PyCharm, GoLand, or RubyMine with the Vue.js plugin) can help you to work with a Vue.js app written in JavaScript.

Create a new Vue.js project

One of the best ways to create a new Vue app is using the Vue CLI. It has a bunch of base project templates that can also be additionally configured to your needs – when generating the project; the CLI will ask you additional questions about the code style, linters, test runners, etc.

In this post, we are going to use a project created using the webpack template with configured vue-router.

Just install the dependencies and open the project in WebStorm and then we’re ready to go!

Run the app

To run our app, we need to run an npm start task that will start the dev server. To do that, simply double-click on the task name in the npm tool window on the left side of the IDE.

When the app is compiled, open http://localhost:8080 in the browser to see the app.

vue-npm-start

By default, all the apps generated with the Vue CLI use the webpack dev server with the hot module replacement mode enabled. It means that when you change something in the components and the changes are saved, the app in the browser is automatically updated. Please note that WebStorm auto-saves your changes when you switch the focus to another application or start a run configuration.

Working with the code

Let’s create a new component in an src/components folder where the components are stored.

We can use a file template for the Vue components that WebStorm provides, there are template, script, and style tags: right-click on the folder, select New… – Vue Component and then name it.

create-new-vue-component

We want our new component to render a greeting when we click a button.

Using code snippets

Instead of typing the data definition inside the component, we’ll use a code snippet (aka Live Template): start typing vdata, then select the template from the completion popup or hit Tab. It will expand it into the code with the variables. Hit Tab to jump from one variable in the template to another and replace the placeholders with the names you need.

using-vue-live-template

There more templates that you can use in your Vue component! You can find a full list of the available Vue templates in Preferences | Editor | Live Templates – Vue.

Let’s keep developing our new component. WebStorm will provide us with all the useful code completion as we type: for tags, Vue directives, properties, and methods defined in the component.

vue-directives

Let’s now use our new component in the HelloWorld component. Start typing its name in the template tag and you’ll see it in the completion suggestion. And once you’ve hit Enter to auto-complete it, the required import will be immediately added to the HelloWorld component definition!

component-import

Cmd-click on the usage of the Welcome component to navigate back to its definition. Cmd-click will always navigate you back from the usage of the component, method or property to its definition.

Completion is also available for the components from the vue-router and component libraries like Vuetify if they are installed in the project’s dependencies.

router-link

Styling the component

We can style the component adding CSS into the style tag. WebStorm will provide code completion for CSS properties and their values, quick-fixes, and inspections.

vue-style

If we want to use Sass or some other language, we need to add the attribute lang="sass" to the tag. WebStorm will then provide code completion for this particular language.

Configuring webpack

Our Vue app is using webpack, as many apps nowadays. Among other things, the webpack configuration of this project defines the aliases that are used in paths in imports.

Like this one:

webpack-alias

To make WebStorm properly understand the paths that use an alias (and also generate imports that use these aliases), we need to point it to the webpack base configuration file (build/webpack.base.conf.js). You can do it in Preferences | Languages & Frameworks | JavaScript | webpack.
WebStorm will analyze the results returned by webpack for this config and use this knowledge for coding assistance.

Debugging the app

We can debug our application using WebStorm’s built-in debugger. All we have to do is create a new JavaScript debug configuration, specify the URL our app is running on (http://localhost:8080) in it, put the breakpoints right in the source code, and start the debug session.

Once the code where the breakpoint is has been triggered, the execution will stop, and you’ll see the local and global variables, the call stack, and many other things in the IDE debug tools window.

debugging-vue-app

You can then explore the app state, evaluate expressions, add watches, and step through the code to see what’s going on in the app and investigate the possible problem.

You can find a sample app that we’ve created and configured on GitHub.

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged . Bookmark the permalink.

55 Responses to Working with Vue.js in WebStorm

  1. [Ekaterina, feel free to delete this once you have seen it.]

    I don’t find the animated gifs the easiest—their coloring and frame rate. I’ve resorted to viewing with 2x zoom but black background and, for example, purple on black does not help. You might want to try some User tests, but the world uses black on white in web pages for a reason (and the animation, which is a wonderful teaching aid in itself, is not good on black). Then the frame rate is quick, which is maybe not too bad, but there should be a pause before and after. Take the button-on-click animation, for example. We see the code before, we’d like to see the code after. But the animation cycles through the code after, and starts again, without the User seeing the end result.

    Just trying to help, Martin

  2. Frank Reycisco says:

    I seem to be having a weird issue with the debugging aspect. First of all it works as described in your instructions. However if I terminate the debugging session and then I re-activate the session, the breakpoints do not seem to work for the reactivated session. However I discovered that if I just do a simple “disable/re-enable” my breakpoints then the breakpoints works as usual. I setup my project using the webpack-simple template.

  3. Alexey Stratan says:

    If using typescript breackpoints don’t work

    Also, is there a possibility to blackbox vue and other libraries in Webstorm debugger (like in Chrome DevTools)?

    • Ekaterina Prigara says:

      Is source map generation is enabled in your TypeScript configuration file? Can you please share a sample project?
      By default, WebStorm should not step into any library code (meaning all the content of the node_modueles folder). The configuration for that is available in Preferences | Build, Execution, Deployment | Debugger | Stepping. But it seems that sometimes it can step into the framework code loading it from the debugger and not being able to map it to the local file in the node_modules. We’ll see what we can do with that. Thanks for the feedback!

    • Kajackdfw says:

      You should set your break points in the Chrome Source folder on the line of java Script that corresponding to the Typescript instruction.

  4. Mikhail Podgorny says:

    Hi guys! Thank you for such amazing update. But I’ve got some questions. In style guide on the vue.js website we can easily find, that it is strongly recommended to use PascalCase in single-file components (*.vue) to name components. Not kebab-case. It really helps to ensures that you working with Vue component, but not web component for example, also PascalCase is more visually distinct from a single-word HTML element.

    But the autocomplete automatically changes for some reason PascalCase to kebab-case. Can you add some option to disable this feature? For example, this :

    components: {
    CDNImage
    },

    converts in to this:

    But I prefer to use it like this:

    Link: https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended

  5. Michael Fromin says:

    Can you clarify what you mean by

    “Completion is also available for the components from the vue-router and component libraries like Vuetify if they are installed in the project’s dependencies.”

    For newbies with WebStorm and Vue where would these settings be located and how should they be configured?

    • Ekaterina Prigara says:

      It means that if you have these modules listed in your project’s package.json file and they are installed in the project by running npm install, when you type the name of the components defined in these modules in your code, you’ll get code completion.

  6. Dave Stewart says:

    Great to see so many useful Vue Live Templates, but there seem to be some real fillers in there as well, like increment variable and import GSAP.

    I think these should be removed, as they just add noise to the signal.

  7. Daniel Boros says:

    I am using bootstrap-vue (its in package.json) and none of the components are recognized.

    • Ekaterina Prigara says:

      Unfortunately, bootstrap-vue uses a quite dynamic way of defining the components in its source code and that makes it hard for WebStorm to identify them and offer in the code completion. We are currently looking for ways to improve that.

  8. Wes says:

    I strongly agree with Martin Frické that the animated GIFs make this post MUCH harder to use. If other people feel the same way they may find the GIF Frames extension to Chrome very helpful.

  9. Wes Rishel says:

    Here are the exact instructions for using the WebStorm debugger while using the Webstorm Vue development plug-in:

    If you don’t already have a run configuration:
    Edit Configuration
    Add New Configuration->NPM
    Name: start
    package.json: [take default which should be the path to this file in your project]
    Command: [take default, which is ‘run’]
    Script: start

    Edit Configuration
    Name: debug
    Add New Configuration->Javascript Debug
    URL: http://localhost:8080
    Click OK

    To actually debug:
    Run->Run->(choose the “start” configuration
    Then Run->Debug->choose the “debug” configuration

    (The secret sauce is that both of these configurations need to be running at the same time.)

    I had trouble doing this and got to this excellent post by Googling “Webstorm Vue Debugging”.

    The magic happens in one of the automated GIFs in the post. Stepping through it very slowly I extracted these steps, and now it works just fine.

  10. Andre Roussakoff says:

    Thank you, Ekaterina. Just wanted to let you know that with your article I have finally gotten debugging to work with my Vue.js hobby project. I am really impressed by the amount of details I can see and investigate in the debugger console. Good job!

    • Ekaterina Prigara says:

      Thank you, appreciate that!

      • Andre Roussakoff says:

        Unfortunately, my happiness was of a short time. After the first successful run with the debugger, every time I run it again I see the same error in the small Chrome window it starts: “localhost refused to connect”. I tried restarting Webstorm, closing my other running Chrome, rebooting the Mac, changing the port in the “Edit configurations…” form. I have even run the Mac’s Network Utility to scan the ports and try and find who is holding the port – this port does not show up as a used port by some process. Any suggestions what I could try?

  11. Andre Roussakoff says:

    Yes, as always before if I run my Terminal (npm run dev) and it starts [successfully!] listening on port 8080, my project runs without problems.

    However, I think I could spot the real error:
    XMLHttpRequest cannot load https://mc.yandex.ru/watch/23195392?wmode=7&page-url=data%3Atext%2Fhtml%2Cc…l%3A1%3Ast%3A1519043730%3Au%3A1519043730372215910%3At%3APage%20unavailable. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

    • Andre Roussakoff says:

      That was when I tried to debug in Yandex instead of Chrome.

    • Andre Roussakoff says:

      Is it possible I am doing it wrong? I have found out that the debugger starts working again if I run the server in the Terminal as stated in my previous post. I was expecting that the Webstorm takes 100% care of the server side.

    • Andre Roussakoff says:

      Just “discovered” the extra information posted by @Wes Rishel above using the analyses of your GIF frames. It seems indeed that the server process should be started separately. The breakpoints are then hit indeed. However, I have noticed a couple of strange things:
      1. No matter which browser is configured via “Edit configurations…”, Webstorm starts Google Chrome. Even if I disable ALL browsers except one, e.g. Firefox or Yandex.
      2. When the breakpoint is hit, I see my code inside a compiled wrapper file: “[webpack interanl] selector.js”

      • Andre Roussakoff says:

        typo: it should have been [webpack internal] selector.js

      • lena_spb says:

        1. this is the expected behavior – JavaScript Debug run configuration can only be used for Chrome debugging. WebStorm also supports debugging in FireFox via FireFox Remote configuration (see https://www.jetbrains.com/help/idea/debugging-javascript-in-firefox.html for instructions), but FireFox support very limited (for example, sourcemaps are not supported, so it can’t be used with applications bundled with webpack). Other browsers are not supported.
        2. Such problems are usually caused by sourcemaps/transpiling issues (missing name mappings for variables, etc.). Sample project would be appreciated

        • Andre Roussakoff says:

          Thank you for the explanation. No probs with #1. If this is by design, I can stick to Chrome. As to #2, I can live with it for the moment. The code I see embedded inside the wrapper is the same as in the source file, so it is quite a workable situation.

  12. Wes Rishel says:

    Although this example worked yesterday, it fails today. When I double click on npm dev I get the error message “Failed at the my-webpack-vue-app@1.0.0 dev script”

    In between I downloaded an update from Webstorm.

    To be sure I redownloaded the project from your Github entry at https://github.com/JetBrains/webstorm-samples/tree/master/Vue, copied, started it as a WebStorm project and then did nothing except double-click on

  13. Dr Fens Rabundi says:

    Is it possible to disable the auto-import in components? This doesn’t play well with libraries like semantic-ui-vue (no import is needed for globally active libs).

  14. Carsten Hess says:

    First of all – thx. for a great editor and the progress on Vue support!

    I don’t know why, but I cannot make the debugging work at all. Not in my own project and also not in your demo-project! (https://github.com/JetBrains/webstorm-samples/tree/master/Vue). The demo project runs fine when I launch it in debug configuration, but no breakpoints are hit.

    Any help would be greatly appreciated.

    For inspiration: semi-successful debugging Vue components in Visual Studio Code was recently described here (https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli). They set dev-tools to “source-map” and do some source-map overrides (“webpack:///src/*”: “${webRoot}/*”). But they also found some severe problems with the sourcemaps generated by vue-loader: https://github.com/vuejs/vue-loader/issues/1163

    Best regards
    Carsten

    • Ekaterina Prigara says:

      Hello Carsten,

      Can you please tell us exactly where the breakpoints are? I’ve tried debugging the sample app once again and I had the breakpoint in the event handler and it worked fine.
      If you have the breakpoints in the code executed on the page load, please try to reload the page in the browser once again – this code might be executed before the source maps are loaded and therefore, WebStorm can’t hit this breakpoint when the page is loaded for the first time.

  15. Boris says:

    Hi

    When I enable tslint, Webstorm correctly marks my errors in .ts files, but not in .vue files. It doesn’t show errors at all in .vue. Is there some magic switch? :)

  16. Korolov says:

    The gif is a bad idea for this blog, it’s really hard to understand where and what I have to do here. I do agree with Martin, the gif is moving to fast, you cant see the code, and you cant copy anything.

  17. mombeya says:

    Vue.js pluggins not working on my webstorm 2017.3, installed but snippet, autocompletion not working ….

    • Ekaterina Prigara says:

      WebStorm has the Vue.js plugin available out-of-the-box. Can you please in Preferences | Plugins that you have a Vue.js plugin developed by JetBrains enabled.

  18. Korolov says:

    This is what i get when i follow your tutorial!!!!

    ‘webpack-dev-server’ is not recognized as an internal or external command,
    operable program or batch file.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! untitled5@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the untitled5@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-04-21T23_39_32_483Z-debug.log
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! untitled5@1.0.0 start: npm run dev
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the untitled5@1.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-04-21T23_39_32_578Z-debug.log

    • Korolov says:

      I think there is a bug, when i restart webstorm i have no errors to start it, but when i create a new vue project i get this error, hope it helps.

    • korolov says:

      I found what I was doing wrong. When you start a new project, you have to wait for dependencies to install. At the bottom of the editor, it says that 2 processes are running and when I clicked on it, it showed me that the project is not ready until all dependencies are installed. I hope it helps someone because it can get you confused.

  19. Simon Carr says:

    When I try to create a new project using the default settings, I get the following error

    Error. Can not install ‘ij-rpc-client’ npm Err! file c:\Users\simon\package.json

  20. Hey guys!

    Thanks so much for your work!
    We’ve recently started to use Vue.js for our front-end development, but we have one big issuee inside PHPStorm (it’s probably also in WebStorm) which is the lack of support for multi-file Vue.

    Recently we decided to split our VueComponents into multiple files as it’s easier to debug for us. I guess the official Vue plugin does not support this and we see lots of errors inside our html templates as it cannot recognize the components used inside. Is there any walk-around for this? or is this functionality in active development at least?

    Thanks for your response.

    • Ekaterina Prigara says:

      Hello Dawid,

      At the moment WebStorm doesn’t support multi-file Vue components.
      As a workaround, please assign the *.html extension to the Vue.js template file type in Preferences | Editor | File Types.
      You might also disable all JS and TS auto imports in Preferences | Editor | General | Auto imports – otherwise WebStorm will add the script section with the component import to the .html file when you complete the component name.

      For the full support please follow this issue: https://youtrack.jetbrains.com/issue/WEB-32274
      To be frank, we don’t have any immediate plans to implement it. To provide a good development experience for these components, we need to invest significant resources and right now we want to keep our focus on improving for support for the more commonly used single-file components, there’re still a lot of things we need to do in this area.

  21. Georgios Katsanos says:

    As others have said, the debugger STILL steps in framework library files, files inside node_modules etc, making it practically impossible to use the debugger. I am using the standard vue-cli generated configuration for Vue. I’ve ticked the setting in “Stepping” inside the preferences. I’ve upgraded to 2018.1.5 .
    I saw some bugs fixed like https://youtrack.jetbrains.com/issue/WEB-32714 , but I don’t understand what you guys fixed – nothing is fixed, still the same, we’ve reported this for months and months.

Leave a Reply

Your email address will not be published. Required fields are marked *