How to create a simple re-usable Vue Project Template

When I first started using Vue, I was blown away how easy it was to use the CLI. I was more surprised to find out how easy it is to create a re-usable Vue project using the Vue CLI. Here’s how:

Note: As of July 26 2018, this article was written in Vue CLI 3.0.0-rc.2.

If you have not installed the Vue CLI, do so with:

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

Set up your project directory

First you want to do is set up a simple folder structure. :

project/
  template/
  meta.js

Edit meta.js

Let’s create the the questions you want to capture to plug into your Vue Template. Add this to your meta.js

Your prompts are the questions your users will be asked. The keys are the variable names that your user will input and where you can add into your template.

Create your project Template

Go to template/ and you can simply start building the template to your project here. Here’s my short and simple Vue template project:

template/
  package.json
  index.html
  README.md
  .gitignore

We will edit our basic Vue App here in our index.html

Note that the curly braces/handle bars is not the Vue mustache syntax but our prompt variables that we set in our meta.js. Any answers the users provides will be plugged into here. Note! Using the Vue mustache syntax will automatically be stripped out due the Vue CLI variables. To get around this, you can use v-htmlto plug in template syntax.

You can apply the same template variables in your package.jsonand README.md

Github Gists does not render actual Markdown. See Raw.

Push Up

After you creating your template, simply push up your project folder to Github. A meta.js file and template folder must exists in the project, otherwise it will not work. After you push up your project, you can now get a copy of your Vue Project by running Vue init Github username/repository name:

vue init username/project-template my-sample-project

And that’s it!

Here’s my sample Github Repo as reference:

joshvillahermosa/simple-vue-reusable-template

Check out other Vue templates for inspiration.

vuejs-templates/webpack

vuetifyjs/nuxt