How to use Vue CLI 3

If you give me 2 minutes of your time I will show you some of the best features for Vue CLI 3.

Before Vue CLI 3 I was used to configure the webpack file to get the environment that I needed. But luckily this belongs to the past. CLI 3 will save you so much time since you don’t have to configure local-dev, remote-dev, QA and production environments yourself.
Furthermore you have the possibility to configure proxy servers, pwa and so on with only a couple of lines.

How to create a project

After you’ve installed vue cli via npm install -g @vue/cli you can create an app with:

vue create testproject

after this you choose the default settings and you are good to go.

How to use modes

To start a mode of your choice you only have to add:

--mode [your mode]

to one of your build tasks. Afterwards you can create a file like .env.mode

Within this file you can now add some environment variables like public keys:

VUE_APP_STRIPE_KEY=pk_test_testestestetstest
VUE_APP_GOOGLE_ANALYTICS=testestestetstest

Within your code you can access these variables like this:

process.env.VUE_APP_STRIPE_KEY

How to use proxy servers

You know this feeling when you are developing a rich client and you get the cors error? One way would be to set your HTTP Headers on your server to allow cors requests. But this might also be security issue and I can’t recommend to do it this way.

Another way would be proxy servers. The reason they work is that cors requests are only forbidden for requests coming from a browser. Another server on the other hand can freely access your APIs without raising cors concerns. Normally it’s extremly tedious to set these up but with vue cli we get them out of the box. Just create a vue.config.js at the root of your project with the following content:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.google.de',
            }
        }
    }
};

And voila you’ve got a proxy server for every call to the /api path. For more information about paths etc. see: HTTP-Proxy-Middleware

How to use PWA

If you want to use pwa(enables offline capabilities of your app) in combination with workbox you only have to use the command:

vue add @vue/pwa

After you’ve executed this command you will see a couple of files within your project. The most important for now is the registerServiceWorker.js which will also be imported by your main.js. The first line

if (process.env.NODE_ENV === 'production')

indicates that the serviceWorker will only be used if you build your app and don’t use the development environment. Of course you could switch this line to development but I can only warn you to do this. The caching of your files will drive you insane while developing so its better to only use this feature in production or just to test if the serviceWorker is working correctly.

If you switch this line to development and start your app you can already see that the service-worker will be registered. If you now try to create a service-worker you will have no luck — lets see why:

As you can see the plugin actively tries to prevent us from using the service worker in a development environment. So the only way to test if the serviceworker is working correctly is to build the project and spin up a web-server. But first we have to change the line in the registerServiceWorker.js back to production. Afterwards you can install a http server like this:

npm install http-server -g

Now you can run these commands

npm run build
http-server dist -p 8081 -a localhost

When you access localhost:8081 you will see that the service worker will work correctly now.

If you want to have a little bit more control over the files that are automatically added (you can find them in the dist directory: precache-manifest…) you can enhance your vue.config.js

workboxPluginMode: "InjectManifest",
workboxOptions: {
    swSrc: "src/service-worker.js"
}

The first parameter means that the precached files (generated by the plugin) will automatically be injected into your custom service-worker.js which will be under the src folder.

Add these lines to verify your custom service worker works:

if (workbox) {
    console.log(`Workbox is loaded`);
}
else {
    console.log(`Workbox didn't load`);
}

If you now run npm run build your service worker should look like this (dist directory)

importScripts("/precache-manifest.415f21068aad841ef1d7c6250910c3ca.js", "https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");

if (workbox) {
    console.log(`Workbox is loaded`);
}
else {
    console.log(`Workbox didn't load`);
}

As you can see you also got the precached files imported and can now cache them if you want.

Hint: Keep in mind that serviceWorkers only work for localhost and https connections.

If you are using HMR on a windows machine you might have encountered the problem that HMR doesn’t work very well with localhost and you have to use the IP. But if you are in cooperate environment your local IP might be blocked. Luckily the vue.config.js can help us here.

If you add this:

module.exports = {
  devServer: {
    host: 'localhost'
  }
}

you can now use HMR for windows too :).

If you want to know more about Vue CLI feel free to write a comment or E-Mail me :).