VueJS booster template is a boilerplate that has simple features that make it really easy to start new projects.

Vue CLI makes starting a Vue project simple -

vue create demo

This sets up everything that you need to start - but just so. There are more than few things missing for a functioning/easy-to-use project :)

The Case for a New Boilerplate

I take my role as a developer with every bit of smartness inherent in me. The problems faced with my back-end projects and my simple solution, booster project in AdonisJS, are very relevant to VueJS and other front-end experiments.

In essence, I copy old projects to create something new to keep things as productive as possible.

Ignoring the philosophical implications of doing such a thing, there is this recurring problem of -

1. Removing parts that are not relevant
2. Removing complexity for small/simple projects
3. Staying consistent to standards and practices
4. Trying to get all these messages to new developers (they exist and I don’t like talking to them overnight to get them started)

So it is that I created another simple starter template for VueJS that is useful to beginners and simple projects.

The idea is to keep things painfully simple and allow users to change as and when they need more complexity.

Here’s presenting vue-vuetify-api-boost.

What does the starter template contain?

The standard set of components of this starter project/ boilerplate provide a consistent and standard experience while starting new projects. It consists of -

1. Standard front-end library - Vuetify is used in this boilerplate
2. Consistent way of dealing with Vuex - Pathify FTW
3. Standard practices for them pesky API calls
4. Some screens to help get started

Packages

We use the below standard features of Vue CLI-

1. Vue + Vuex + Vue Router
2. Node SaSS
3. Linter

The major additional packages beyond those installed by Vue CLI installed -

• vuetify: the most popular Vue styling library
• axios: API calls
• vuex-persist: Persist vuex to local storage and cookies (using js-cookie)
• vue-html-to-paper: allow pretty printing of pages (no example pages)
• file-saver: Save files being downloaded from server (no example pages)
• vue2-dropzone: Drop files to upload (no example pages)
• v-tooltip: Tooltips that don’t need a 100 lines to implement
• [dev] prerender-spa-plugin: pre-render pages without selling your soul

Key Features

• Registration and login pages
• Router setup with protected routes, and dynamically loaded components
• Standard Terms, Privacy Policy and Credit pages
• Default and standard layouts for list and detail views (of a CRUD application)
• A sample Service Request entity that demonstrates how fetch/insert/update work

Structure

The structure is plain and simple.

Views and components

UI elements are like any other project. We use Vuetify for styling!

Layouts

Layouts exist in a separate folder under components. Every view starts with a layout and utilises the slots provided by layout to paint the pretty picture.

Mixin

There is a single mixin that provides validations and a few utilities used across the board. You have to import the mixin in every component you use. It is deliberately not included for the entire app - though you could do that.

Router

Router is as simple as they come. It dynamically imports most components to avoid front-loading every single component at start-up.

It also provides protected routes and dynamic component loading in a couple of cases.

Vuex

• mutations, getters, actions exist in store/* themselves. They can be segregated into separate files if projects become too complex
• There is no distinct service layer. I understand (and agree to) the arguments to keep business logic separate from vuex logic, but I don’t use those in simpler projects.
• vuex-pathify takes care of all mutations - so, few mutations are hand-written

Using the boilerplate

Clone this repository to start..

git clone https://github.com/techformist/vue-vuetify-api-boost

Install packages -

cd vue-vuetify-api-boost
npm i

Project setup

Setup like any other Vue project.

• Add/ change views and components
• Change layouts
• .. and more

Compile with hot-reload for development

npm run serve

Voila, we have this super screen :)

You can continue using Vue CLI with this project.

Back-end Partner Projects

The template runs without issues out-of-the-box with the following projects in back-end -

• booster project in AdonisJS

Other Boilerplates

See -

• Vue Enterprise Boilerplate: for large projects / teams

Conclusion

None of the additional packages or features in the starter template add anything significantly new, but required at least a day to set everything up.

Hopefully, we continue optimising the start-up time for our projects and eliminate more boring tasks required at the very beginning of a project. And.. add even more stuff useful to ourselves and anyone else who bothers picking up this boilerplate amongst a million other (better) templates available on the Internet.