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.

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

Leave a Reply

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