An Overview of the vue.config.js File

Jan 10, 2020

The vue.config.js file is a config file for the Vue CLI. The vue.config.js file exports an object that contains various config options. For example, the below is a valid vue.config.js:

module.exports = {};

Starting a Dev Server

One of the most common uses for the Vue CLI is starting a local web server for development work. The Vue CLI is one of the easiest ways to compile your vanilla JS into a website, without needing to write any HTML.

First, run npm install vue @vue/cli @vue/cli-service-global. The @vue/cli-service-global plugin is required to run a server locally. Next, create an index.js file that contains some Vue code:

import Vue from 'vue';

new Vue({
  data: () => ({ count: 0 }),
  template: '<h1 v-on:click="++count">Clicked {{count}}</h1>'
});

Note that this code does not explicitly mount the Vue instance to the DOM. The Vue CLI will take care of that.

Next, open up vue.config.js and set the devServer.port option to tell the Vue CLI what port to run the web server on:

'use strict';

module.exports = {
  devServer: {
    port: 3000
  }
};

Now, run ./node_modules/.bin/vue serve to start the web server and compile your index.js file. You should see output similar to the below:

 DONE  Compiled successfully in 337ms                                     5:56:59 PM


  App running at:
  - Local:   http://localhost:3000/ 
  - Network: http://10.87.106.132:3000/

Point your web browser to http://localhost:3000, and you should see an <h1> tag that says "Clicked 0".


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!