Vue.js, webpack and PhpStorm/WebStorm – preparation of environment

Webpack is a JavaScript module bundler. It takes modules with dependencies and generates static assets representing those modules. So if you want to create Single Page Application for example with Vue.js it’s a good reason to use it.

The best way is to get a ready pack: vue-webpack-boilereplate. It’s a full-featured Webpack and vue-loader setup with hot-reload, lint-on-save and more. And practically the tool is ready to work out-of-the-box.

New project

To install it with yarn (you can also use npm) use commands:

yarn global add vue-cli
vue init webpack your-project-name
cd your-project-name
yarn install
yarn run dev

Inside, in /src catalog you can find an example of simple Vue app. It’s a good starting point to build your own one.

But everything you see now in /src catalog and in your browser is only a source code not ready for production. To prepare a production build run a command:

yarn build dist

After a few seconds you will see a new /dist catalog with index.html file inside and assets. The app is ready to publish.

PhpStorm/WebStorm and *.vue files

Files with .vue extension are Vue single files components. Inside you can find a <template> section with HTML code and injected vue variables (eg. section with definition of our component, all methods etc. In the end you can find a <style> section when you can put CSS for this part of your app.

If you open .vue file with PhpStorm (or WebStorm), it will probably suggest you to install an additional plugin for this type of files. It’s a good way, but I found a better. Open Preferences, Editor, File-types and choose HTML from the list. Now add “*.vue” to the “registered patterns”. If you have Vue plugin installed, find “Vue” on the “recognized files types” list and remove “*.vue” pattern.

Why do such a thing? Because I noticed that default (by plugin) Vue files support doesn’t work well with HTML code in the template section. For example, there is no automatic closing tags.

At this moment you probably see a lot errors highlighted by PhpStorm in the script section. It’s because in Vue files we’ll use ES6 (ECMAScript 6) – the newest standard of JavaScript language. Just change your <script> tag for this:

<script type=”text/babel”>

Now the code in the <script> section has probably another background. It means it’s a language injection. If you don’t like it, open Preferences, Editor, Language Injection and disable JS on the list.

SASS/SCSS support

If you want to use SCSS (or SASS) in your project, just change the <style> tag for this:

<style lang=”scss” type=”text/scss”>

You also need to install node-sass and sass-loader modules, so run a terminal and put in this command:

yarn add node-sass sass-loader --dev

Autoprefixer

Autoprefixer is a great tool that automatically adds all required CSS prefixes for browsers. For example, you can use only user-select: none; and autoprefixer creates:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

So in your /build/vue-loader.conf.js file, after loaders add the code:

postcss: [
    require('postcss-import')(),
    require('autoprefixer')({
        browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
    })
]

and install postcss-import module:

yarn add postcss-import --dev

Voila, our environment is ready to use now!