Getting Started With Vue CLI 3

To get started with Vue CLI 3, you should have NPM installed. If you do not have NPM installed, you should go ahead and download it as it’s needed for the CLI to run; it’s crucial for modern front-end web development these days. Once installed, run the following commands.

Note: You have the choice of using either NPM or Yarn. Yarn is like NPM but faster, more secure, and has offline compatibility; it’s created by Facebook and is compatible with NPM.

$ npm install -g @vue/cli
# or
$ yarn global add @vue/cli

$ vue create project-name

From here, you can select the default configuration, which contains a simple Webpack boilerplate with Babel and ESLint. It should ask you if you want to install all of the packages with either NPM or Yarn.

Note: Whichever you decide to use, stick with it!

If you scaffold your project with the custom option, you should see an array of options to choose from.

To navigate up and down, use the arrow keys, and to select an option, press the space bar. After you select some options, press Enter and depending on the selections, Vue CLI 3 should ask you additional questions, which will further define your configuration. You can even save your configuration and use it later as a preset if you want!

The CLI tool is even smart enough and will detect if you try to start a new project with the same directory and name. It’ll ask if you want to overwrite or merge your configuration. Pretty neat stuff.

A Quick Tour of the Generated Project

As mentioned in the previous chapter, all projects in this book will be generated from Vue CLI 3.

When a project is generated with Vue CLI, components are bootstrapped into a centralized Vue Instance. These Vue components are singular files that contain all of the HTML, JavaScript, and CSS that the component needs in order to render and function.

The Single File Vue Component

Each single file Vue component is treated as its own “mini application” within itself. You can, of course, nest components within components. In fact, that is what is really happening under the hood. The Vue.js application is one large component that is bootstrapped and injected into one single Vue component. which is then bootstrapped into a single Vue instance.

<template>
  <div><!-- must have one root element, the template tag does not count as a root element -->
    <h1>I am one component of many!</h1>
    <p>{{ framework }} is a great JavaScript framework! I can import and nest other components!</p>
    <another-component></another-component>
  </div>
</template>

<script>
import AnotherComponent from '@/components/AnotherComponent';

export default {
  name: 'MyComponent',
  components: {
    AnotherComponent
  },
  data() {
    return {
      framework: 'Vue.js',
    }
  },
};
</script>

<style scoped>
/* You can scope a component's styles just by adding an attribute! */

h1 { color: blue; }
p  { color: green; }
</style>

Note: PascalCase converts to kebab-case. You can reference AnotherComponent as either <AnotherComponent /> or <another-component>.

If you’ve followed through Chapter 1: Getting Started With Vue.js, some of this should look familiar. This single file component is similar to a Vue instance, but with some differences. For example, your HTML is not in a separate file; you don’t need to define an el for Vue.js to control. Instead, the logic in the script tag and the CSS in the style tag directly affect the HTML above in the template tag.

Also note, the data in the single file component must be a function that returns an object. Unlike in a single Vue Instance, the data is a single object with properties.

import AnotherComponent from '@/components/AnotherComponent';

<template>
  <div>
    <h1>Welcome, {{ name }}</h1>
    <ProfileCard />
  </div>
</template>

<script>
import ProfileCard from '@/components/ProfileCard';

export default {
  name: 'Profile',
  components: {
    ProfileCard,
  },
  data() {
    return {
      user: {
        name: 'Tony Stark',
        username: 'ironman',
        age: 47,
        citizenships: ['American', 'Bulgarian'],
        profilePicture: 'images/tony.png',
        description: 'Tony Stark is a self-made super hero, known as Iron Man. He is a super genius and develops his own suits. He is currently CEO of Stark Industries and a founding member of the Avengers.'
      }
    }
  }
}
</script>

<template>
  <div class="card">
    <h2></h2>

    <img :src="" />

    <ul>
      <li>Name: </li>
      <li>User Name: </li>
      <li>Age: </li>
      <li>Citizenship(s): </li>
      <li>Description: </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProfileCard'
}
</script>

<style>
.card {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #ccc;
}
</style>

<template>
  <div>
    <h1>Welcome, {{ name }}</h1>
    <ProfileCard :user="user" />
  </div>
</template>

<script>
...
</script>

<template>
  <div class="card">
    <h2>{{ singleUser.name }}</h2>

    <img :src="user.profilePicture" />

    <ul>
      <li>Name: {{ singleUser.name }}</li>
      <li>User Name: {{ singleUser.username }}</li>
      <li>Age: {{ singleUser.age }}</li>
      <li>Citizenship(s): <span v-for="citizenship in singleUser.citizenships">{{ citizenship }} </span></li>
      <li>{{ singleUser.description }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProfileCard',
  props: ['singleUser'], // Down here!
}
</script>

<style>
/* styles */
</style>

<template>
  <!-- html -->
</template>

<script>
export default {
  name: 'ProfileCard',
  props: {
    singleUser: Object,
  }
}
</script>

<template>
  <!-- html -->
</template>

<script>
export default {
  name: 'ProfileCard',
  props: {
    singleUser: {
      type: Object,
      required: true,
      default: () => {
        return {
          name: 'Tony Stark'
        }
      }
    },
  }
}
</script>

<style>
  /* styles */
</style>

<template>
  <div>
    <h1>A Code Sample Using Slots</h1>

    <component-two>
      <p>The HTML that is in between these component tags will be injected into ComponentTwo where the slot tags are!</p>
    </component-two>
  </div>
</template>

<script>
import ComponentTwo from '@/components/ComponentTwo';

export default {
  name: 'ComponentOne',
  components: {
    ComponentTwo,
  },
}
</script>

<template>
  <div>
    <h2>Component Two</h2>
    <slot></slot><!-- HTML from ComponentOne is injected here! -->
  </div>
</template>

<script>
export default {
  name: 'ComponentTwo',
  ...
}
</script>

<template>
  <div>
    <h1>A Code Sample Using Slots</h1>

    <component-two>
      <p slot="content">The HTML that is in between these component tags will be injected into ComponentTwo where the slot tag with the corresponding name attributes are!</p>

      <h3 slot="heading">A Heading for the component content</h3>
    </component-two>
  </div>
</template>

<script>
import ComponentTwo from '@/components/ComponentTwo';

export default {
  name: 'ComponentOne',
  components: {
    ComponentTwo,
  },
}
</script>

<template>
  <div>
    <slot name="heading"></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  name: 'ComponentTwo',
  ...
}
</script>

Using Pre-Processors

One of the main advantages that Vue.js has over its competitors is the ease of installing and using CSS pre-processors like SASS/SCSS, LESS, Stylus or HTML pre-processors like Pug (Jade). This ease of use is thanks to Vue Loader.

In other frameworks, there’s generally a lot more setup and concentration involved. I find it extremely useful and easy to import packages and define the preprocessor in a component. Since pre-processors are defined via an attribute in each component, you could have some components with a pre-processor or without one. You can even have one component use SCSS and another use LESS. It’s not recommended to have multiple preprocessors in a single component (or in an app for that matter), but it’s nice to have the option.

CSS Pre-Processors

Let’s take a look at some CSS pre-processors.

$ npm install sass-loader node-sass style-loader --save-dev
# or
$ yarn add sass-loader node-sass style-loader --save-dev

$ npm install -D less less-loader
# or
$ yarn add less less-loader

$ npm install stylus stylus-loader --save-dev
# or
$ yarn add stylus styles-loader --save-dev

HTML pre-processors

You aren’t limited to just CSS pre-processors, you can also use HTML pre-processors like PUG (formally known as Jade).

$ npm install -D pug pug-plain-loader
# or
$ yarn add pug pug-plain-loader

<template lang="pug">
div
  h1 Hello world!
</template>

Modifying Webpack Configs Without Ejecting

If you are not familiar with the term “ejecting” in the framework sense, that’s good because it can be a bit terrifying. Ejecting is a term that was coined by the React.js community when referring to Webpack configs and their CLI, Create React App. In order to make Create React App “config-less” and updateable on the Webpack end, the Webpack configs are not accessible to the user. It’s not a bad thing because 1) Webpack is intimidating and can be confusing and 2) you do not have to manage the configuration files.

However, there are times, scratch that, there will be times where you want to modify Webpack yourself. You might want to create an alias to a node module that doesn’t have one. As soon as you want to touch configuration files, you need to run npm run eject, and just hope for the best. The ejection process is irreversible and blocks you from being able to upgrade your scripts. Essentially, when ejecting, configuration and build dependencies are moved from the scripts folder and are placed directly into your project. One of the most praised changes in Vue CLI 3 is the ability to make Webpack configs without ejecting your application.

Part of the success of this is the ability to add plugins to your Vue CLI project. The flexible plugin APIs and Webpack scripts make Vue CLI flexible, future-proof, and updatable. Unlike in its predecessor, Vue CLI 2, your project can be updated and receive the latest updates to plugins and to the CLI itself as they become available.

To config, your application without ejecting, create a new file in the root directory and name it vue.config.js. In this new file, you need to export a Webpack module and provide a configureWebpack object. Let’s use the default Webpack configuration.

vue.config.js

module.exports = {
  configureWebpack: {
    plugins: [
      // List plugins that you will be using
    ],
  },
};

You can also specify certain plugins for specific environments. In the past, after ejecting your application, you would need to add different configurations in different files. For example, to modify the development build of your project, you would modify the webpack.dev.config.js file or the webpack.prod.config.js file for the production build. With Vue CLI 3, all configurations are stored in one file and environments are differentiated with a conditional.

vue.config.js

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // Add configurations or modifications for the production build
    } else {
      // Add configurations or modifications for the development build
    }
  },
};

Using the Vue CLI GUI

Now that you’ve learned how single file Vue components and how to scaffold a Webpack project, you can learn how to do all that again in a fancy GUI. It’s important that you understand concepts and how to do something before jumping straight into a user interface.

The Vue CLI UI is created and developed by Core Vue Team Member, Guillaume Chau. He’s been working hard for months to deliver a unique experience to not only scaffold Vue.js projects, but managing them and their dependencies.

If you downloaded the Vue CLI while following along with the book, then you already have the UI installed. If you installed the Vue CLI before June of 2018, then you will need to update Vue CLI to at least version 3.0.0.

# Update Vue CLI 3
$ npm install @vue/cli
# or
$ yarn add @vue/cli

After updating to at least version (> 3.0.0), you now have access to the vue ui command. The command is global and will launch the UI regardless of the project folder that you are in; you can launch this anywhere on your machine.

To get started, run the following command:

$ vue ui

This will launch the UI on localhost:8000. You should see the project screen with no listed projects.

From here, you can create a new project or import a project if you have a previously generated Vue CLI 3 project. Let’s create a new project by clicking on the “Create” tab. From here, you can navigate through your computer’s directory structure. Once in your working directory, click on the green “Create a new project here” button.

Fill out the information and click on “Next” when ready. From here, these options should seem familiar to you. That’s because these are the same options that you selected from the CLI earlier in this chapter. After selecting the options, you can choose to save the configuration if you wish.

At the bottom of the page, you’ll see a small notification that the CLI is installing the project dependencies. When you click on that, a console appears at the bottom of the page.

Now that the project is created, you can see it in the “Projects” view. If you imported a project, you will see it in the “Projects” view as well.

From here, you can add additional NPM or Yarn plugins to your project, modify configurations, or modify project tasks like npm run serve or others.

This new product from the Vue Core Team is brand new and can greatly improve your workflow and managing project dependencies. With the additional of the Vue CLI GUI, Vue’s CLI is proving to be a big contender and a serious tool for scaffolding single page applications. In my opinion, Vue’s CLI offers more out-of-the-box than React’s create-react-app CLI and is on par with Angular’s.

Conclusion

If there is any indicator of the maturity rate of Vue.js as a whole, it’s Vue CLI 3. As stated before, the new command line interface tool is a huge upgrade from its predecessor, Vue CLI 2. The CLI is also another tool that is developed and maintained by Evan You and the Vue.js Core Team, so it gets updated regularly in order to keep up with developer’s needs and the Vue.js library itself.

This latest updated to the CLI is huge with many welcome additions. In the past, if you needed to modify Webpack, you needed to commit to updating the config files yourself via “ejecting”. However, with Vue CLI 3, the configurations are hidden but can also be expanded upon with a vue.config.js file.

This means you will not have access to the original Webpack configuration. In the past, configurations in Vue CLI 2 were exposed for developer’s to see, which could intimidate developer’s regardless of skill level. Configurations were also very difficult to maintain because Webpack receives updates fairly regularly. And if you were to download a project template via the CLI, like the Nuxt.js template, for example, your forked template and the source template both needed to be synced in order for your forked template to receive updates. This can lead to user errors, breaks to your code, and numerous headaches. You also had to add different libraries like Vuex, Vue Router, and SCSS separately; now, you can install them during start-up.

With Vue CLI 3, templates are much easier to update now, you can choose which libraries you want to add during setup up (and even save as a preset), and Webpack configurations are hidden. The Webpack configurations are hidden because you don’t need to modify them at all. As stated above, the Vue CLI project is configurable without ejecting. Anything that needs to be configured can be, and anything that needs to be added like sass-loader can be done as a plugin.