Working with Vue.js in WebStorm

Ekaterina Prigara

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.

WebStorm Team

Comments below can no longer be edited.

76 Responses to Working with Vue.js in WebStorm

  1. Martin Frické says:

    January 3, 2018

    [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:

    January 10, 2018

    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.

    • Ekaterina Prigara says:

      January 10, 2018

      Thank you for the feedback! We will investigate the problem.

      • Ekaterina Prigara says:

        January 11, 2018

        We have fixed an issue that is most probably related to yours (unfortunately, we are not sure we reproduced your issue exactly): https://youtrack.jetbrains.com/issue/WEB-30371
        The early preview for WebStorm 2018.1 will start very soon. Stay tuned!

  3. Alexey Stratan says:

    January 12, 2018

    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:

      January 12, 2018

      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:

      January 17, 2018

      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:

    January 22, 2018

    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

    • Ekaterina Prigara says:

      January 23, 2018

      Thanks for the feedback. It seems that the style guide was not yet available when we implemented the code completion for component names and Vue component file template. We’ll default to a different naming convention in WebStorm 2018.1.

      • Mikhail Podgorny says:

        January 23, 2018

        Will this be fixed? 😉

        • Ekaterina Prigara says:

          January 24, 2018

          As I’ve said, it will be fixed in WebStorm 2018.1.

  5. Michael Fromin says:

    January 30, 2018

    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:

      January 30, 2018

      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.

      • Smaug says:

        February 16, 2018

        But this only works in Webstorm, right? Because this clearly isn’t working in IntelliJ ultimate with all the vue plugins

        • Ekaterina Prigara says:

          February 16, 2018

          What version of IntelliJ IDEA do you use? What exact problem do you have?

          • Smaug says:

            February 16, 2018

            Sorry I was using an outdated version. My bad. I thought it would update automatically, which it obviously doesn’t 🙁

            • Ekaterina Prigara says:

              February 16, 2018

              Great to hear that it works! Thanks for the update.

  6. Dave Stewart says:

    January 31, 2018

    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:

    February 9, 2018

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

    • Ekaterina Prigara says:

      February 12, 2018

      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.

      • Jan says:

        October 25, 2018

        It still doesn’t recognize these components. Do you have any info or you decided to ignore it?

  8. Wes says:

    February 16, 2018

    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:

    February 17, 2018

    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:

    February 19, 2018

    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:

      February 19, 2018

      Thank you, appreciate that!

      • Andre Roussakoff says:

        February 19, 2018

        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?

        • Ekaterina Prigara says:

          February 19, 2018

          Hi Andre,
          If you just open your app in the browser (without the debugger), does it work?

  11. Andre Roussakoff says:

    February 19, 2018

    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:

      February 19, 2018

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

    • Andre Roussakoff says:

      February 19, 2018

      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:

      February 19, 2018

      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:

        February 19, 2018

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

      • lena_spb says:

        February 19, 2018

        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:

          February 19, 2018

          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.

          • Wes Rishel says:

            February 19, 2018

            Thanks. I got it to work again. Not sure why it suddently stopped, but water under the bridge…

  12. Wes Rishel says:

    February 19, 2018

    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

    • Andre Roussakoff says:

      February 19, 2018

      tried the same just to make sure. no errors so far. it starts and i can use the debugger as described above.

    • Wes Rishel says:

      February 19, 2018

      I was able to get this to run again.

  13. Dr Fens Rabundi says:

    March 5, 2018

    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:

    March 27, 2018

    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:

      March 28, 2018

      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:

    April 19, 2018

    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:

    April 20, 2018

    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:

    April 20, 2018

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

    • Ekaterina Prigara says:

      April 20, 2018

      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:

    April 21, 2018

    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:

      April 22, 2018

      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:

      April 22, 2018

      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:

    May 23, 2018

    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. Dawid Zbinski says:

    June 22, 2018

    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:

      June 22, 2018

      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.

      • Nathaniel Rink says:

        October 8, 2018

        This makes it super difficult to move from an angular experience to a vue experience

        • Nathaniel Rink says:

          October 8, 2018

          Never mind, turning off the ts / js import options work. Not sure what that gives up, but it’s working. Thanks

          • Ekaterina Prigara says:

            October 9, 2018

            Good that it works now. Thanks for the update!

  21. Georgios Katsanos says:

    July 9, 2018

    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.

    • Ekaterina Prigara says:

      July 9, 2018

      Thank you for your feedback! As it is stated in the issue, it was fixed in WebStorm version 2018.2 that is now available as an Early Access Preview: https://www.jetbrains.com/webstorm/eap/ Please give it a try!

  22. David Pavel says:

    August 13, 2018

    Can you update “Configure webpack” section for Vue CLI 3 based projects. Raw webpack configuration is no more exposed. How could I setup Idea project to resolve alias like ‘@’ => ‘src’?

    • Ekaterina Prigara says:

      August 13, 2018

      Please set the path to node_modules/@vue/cli-service/webpack.config.js. By the way, please update to WebStorm 2018.2.1 – it configures this path automatically for all new Vue CLI projects.

      • Pedro says:

        August 16, 2018

        It’s not working when the vue.js project is in a subdirectory. I have one project with backend directory and two vue.js projects.
        /
        /backend
        /vuejs-project-1
        /vuejs-project-2

  23. Keagan says:

    September 27, 2018

    I don’t know what has changed but I cannot for the life of me get PhpStorm to recognise Vuetify components (in node_modules).

    – If I simply type out a Vuetify component it highlights it citing Unknown HTML tag, and while I can add it as a custom tag, none of the properties are registered.
    – If I select a grayed tag from the long autocomplete list it adds it as an imported component (from the node_modules folder)

    I used to be able to just use these components but in v2018.2.3 it’s all broken.
    Any advice?

    • Ekaterina Prigara says:

      September 27, 2018

      Hello, what version of the Vuetify library do you use? Vuetify 1.1 was rewritten in TypeScript and as a result it is no longer properly supported by the IDE. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-32886

      • Keagan says:

        September 27, 2018

        Yup, that’d be the issue. Thanks very much for your prompt and helpful reply!

  24. Charles says:

    December 4, 2018

    Greetings Ekaterina,

    Can you add on to this article details on setting up, running and debugging php on a vue project(When using npm run debug).. or point me in the right direction?

    • Ekaterina Prigara says:

      December 4, 2018

      Hello,
      You want to debug the PHP backend in an app with the Vue.js frontend, right? Unfortunately, I have zero experience in PHP, but I’m sure that my colleagues from the PhpStorm team will be glad to explain how to do that in PhpStorm. Please contact them using this form: https://intellij-support.jetbrains.com/hc/en-us/requests/new Select PhpStorm as a product.

  25. AJ says:

    May 31, 2019

    I had to change my JavaScript Debug configuration by setting the Remote URL for the root directory of the project to “webpack:///.” (note the period). I assume this is similar to how you setup Visual Studio Code with sourceMapPathOverrides.

    After doing that, everything works as expected.

  26. Wayne says:

    January 4, 2020

    Thanks for the great tutorial!

    I’m having some trouble following the coding in the animated GIFs (even with the suggested Gif Frames plugin).

    I was going to look at the GitHub repo referred to in the article:
    https://github.com/JetBrains/webstorm-samples/tree/master/Vue
    but that’s currently a 404.

    Is the tree/master/Vue code still available someplace else?

    Thanks!
    Wayne

    • Ekaterina Prigara says:

      January 7, 2020

      Hi,
      The sample project became outdated at some point and we’ve decided to remove it, but you can still find the code in the GitHub repo.

      • Ekaterina Prigara says:

        January 7, 2020

        To be honest, I was not expecting that people would follow the coding in the gifs – I only added them to illustrate the descriptions of the features mentioned in the blog post.

  27. Alexey says:

    February 1, 2020

    Why does WebStorm open new Chromium window?
    This window is not synchronized with main Chromium account so I need input my long password in application auth form every time when start debugging.