How to get started with Vue single file components using Webpack
This guide assumes that you have some idea about vue
. It aims to save you time, trying to help you understand the webpack
config for starting with vue
and its single file components. You can use vue-cli
for creating the project template but this is for people who want to dig in further.
You are probably a developer who knows the front-end. You have decided to take your app to the next level by adopting vue
as the front-end framework. You jump into the documentation and start reading about how to develop components, all while drawing parallels in your head with use-cases for the first component in your project. The framework and documentation turns out to be awesome and you cannot wait to start using vue
.
If this sounds familiar, then that’s great!
TL;DR you can clone or fork the repository here and get started.
Let’s get started
Our goal is to write our first component, but not the way it’s done below. Though there is nothing wrong with loading the script file like this, it gets messier when you end up loading multiple script files this way.
We will be using webpack
for bundling our app. If you haven’t looked into webpack
, then now is the time to configure your first app. It looks daunting at first, but the latest version (v4) is super easy and intuitive to use.
Installing packages
In order to get to that point, let’s install some basic packages which we’ll need. We will be using npm
for managing the packages. If you are not confident using npm
, don’t worry! Just follow along. Make sure you have installed node
and npm
on your machine.
Note: If you have time on your hands, then do read up on how npm works and what it means for the security of your app.
Moving along…
npm install vuenpm install webpack --save-dev
Since we will be writing our code in ES6
and above, we need something to transpile or transform our code. We will be using babel
with webpack
to help us come up with a version of code which will run in browsers which still do not support full spec of ES6
.
This article gives a nice overview on babel, and will explain in more detail why we need the below packages.
npm install babel-core --save-devnpm install babel-loader --save-devnpm install babel-preset-env --save-devnpm install babel-preset-stage-2 --save-dev
Your package.json
should look something like the below. Your versions might be different when you install the below packages, which is fine as long as the app doesn’t break.
If you want to install the specific versions as you see above, then simply do
npm install webpack-cli@^3.0.2 --save-dev
Now that our basic toolset is setup, lets focus our attention on the idea of how are we gonna write thetemplate
or html
part of our first component. Will it be in a separate .html
file ? Or will it include an existing file like index.html
? Or will it be in a string
which is then further compiled using some library? I have been through this train of thought, as well.
Vue
solves this problem by providing a way to write components where you can associate the template
part and the script
part of the component in a single file. How awesome is that?
For example, if you are building a simple table
component, then you can name the file as table.vue
which has everything the component needs. What if I tell you that you can have styles
also in the same .vue
file which are specific to that component? I know! Sounds crazy!
Let’s install the below packages so we can have single file components, or SFCs
:
npm install vue-template-compiler --save-devnpm install vue-loader --save-devnpm install css-loader --save-devnpm install vue-style-loader --save-dev
vue-template-compiler
is for making sense of the template
section of the component.
vue-loader
enables webpack
to load single file components.
css-loader
and vue-style-loader
allow us to author styles in the component.
Your package.json
should look something like the below now:
Webpack
Now that we have every package we need in our arsenal, all we need is a way to instruct webpack
. If you are trying to deal withwebpack
and how it works, it’s best to understand the intuition of why that tool exists in the first place. It doesn’t matter if we use webpack
or not, we just need some tool which can do things like:
- Process entry points in our app for starting the process
- Name the output/processed files and specify their location
- Process different types of files like
.css
,.js
or.vue
- Hot reloading the changed files in order to rebuild the whole thing
Webpack does all these things (and much more) if you just specify what needs to be done via a config object.
We will be using webpack-dev-server
for serving static and dynamic assets in our project, because why not.
Looking at the code
Let’s clone or fork (if you want to improve) this project.
You will see that the project has the same package.json
as mentioned above. Let’s install and run the project based on the instructions in the repo.
index.html
has our first component called main-content
:
<div id="mainContent">
<main-content></main-content>
</div>
Our main-content.vue
, which is a SFC
, looks like the below. As you can see, it has three sections: template
, script
and style
. Everything is tied to our component neatly and webpack
takes care of the rest.
Head to http://localhost:8010/ in your browser and you’ll notice our main-content
component. Now change something in the component like below:
<template>
<div class="main-content">
<h1> This is my first modified component in Vue </h1>
<h3> {{ webpack }} </h3>
</div>
</template>
and notice how the heading changes in the browser. To understand how it works, have a look at webpack.config.js
. Each section in the config has comments explaining why we need it.
Let’s divide the webpack
config into three main parts.
The input/output to Webpack
Processing Vue single file components and other JS modules
Configuring the Webpack dev server
Each of the options in the config are pretty self-explanatory, and you can tweak them to understand them better. For example, you can remove one of the properties and notice the error(s).
Note: every time you change the config, you have to stop (cmd + C) and run npm run start
for the changes to reflect.
You can add more options to the app by reading through the docs, and feel free to fork the project for improvements.
If you think this article helped you, then you can buy me a coffee or just share with others. Cheers 🍻