Dr. Jeannot Muller

When you'll start learning vue.js, and you want to use Webstorm, instead of a standard editor, you will face the issue that you have to "fight" with two challenges: firstly vue.js and secondly the great IDE from jetbrains.com.

Webstorm can nowadays embed vue.js and you can easily create a new project, including all necessary depencencies within the IDE. However this is creating a projekt beyond the easy beginner's sripts, in terms of complexity.

Webstorm can nowadays embed vue.js, and you can easily create a new project, including all necessary dependencies within the IDE. However, this is creating a project beyond the easy beginner's sripts in terms of complexity.

Most teachers and training courses are using at the beginning online tools like https://jsfiddle.net or https://codepen.io/. The reasons for this are obvious: instead of having to deal with multiple different flavors of integrated development platforms (IDE) or text editors, all students are using the same platform.

This tutorial is for you to set up your WebStorm IDE to quickly build your first vue.js application:

Starting to code:

This is our test program. Obviously vue.js is not yet embedded.

You have to download your vue.js JavaScript file from here:

Installation — Vue.js
Vue.js - The Progressive JavaScript Framework

and put the download in the same root folder than your index.html file.

Adding vue.js as a new Library to your project:

Go to Preferencs and open the Libraries menu iteam in "Languages & Frameworks".

Use the Button "Add" to embed your downloaded file.

Go back to your editor's main view:

I put my vue.js file into a subfolder "frameworks". This might be now a different path on your system. Chose your vue.js file and just drag and drop it into your code window on the left.

The entry:

<script src="your_PATH/vue.js"></script>

will automatically be greated by WebStorm.

Embedding vue.js into the IDE:

Ensure you have the vue.js plugin installed. This is not yet important, but you'll need it once you want to use the WebStorm vue.js templates.

Are you still getting errors?

You have to type the "Option"-key and "Enter" over the "v-on" statement to avoid this error. The reason is that Webstorm will only check the vue syntax on vue-files. Not within a html-file. But his is a cosmetic issue only.

Usually you will learn after a few chapters how to create vue files and you can use the vue-template of WebStorm.