Prototyping 101: VueJS + Bootstrap

5 min readJan 17, 2020

In this article, I’m sharing my favourite configuration of VueJS project, how to adapt Visual Studio Code and how to easily add Bootstrap to the project.

This configuration will allow you to focus on prototyping without the pain of adding more features later.

Installation of VueJS and CLI

Type in a command line:

npm install vue

Source: https://vuejs.org/v2/guide/installation.html#NPM

Doesn’t work?

do you have node.js?
if you are on mac try this tutorial

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

Source: https://cli.vuejs.org/guide/prototyping.html

Bravo! 👏 👏 👏

Creating the project!

vue create hello-world

To navigate use space to select feature, arrow down and up to move between items and enter to confirm.

In the next step, we need to choose features for our project. In addition to Babel and Linter / Formatter we will choose Router. Liter / Formatter are responsible for nicely formatted and consistent code. Router is responsible for redirection to different pages in VueJS app.

Features to choose: Babek, Router and Linter / Formatter

Router can be used in history mode, shortly, it means that the # from the link of our application will be removed. For prototyping purposes, we don’t need to worry about history mode so we will answer “no”.

For linter / formatter we will choose ESLint + Prettier. Using formatter might be annoying at the start but later I will explain how to configure these tools to work with them in peace.

ESLint + Prettier as a choice of linter / formatter

From my experience, it is easier to work with option “Lint on save” as the development flow is fluent and it is easier to fix smaller formatting errors than a big bunch of formatting errors at the end.

We will save the setting of the project in package.json.

And if you like that set of settings you can save it as your reusable preset.

Youpi! The configuration is done now! 😄

Change your directory to the folder where is your project:

cd my-prototype

And if you are using Windows machine 💻 you can directly open your Visual Studio Code:

code .

Bravo! 👏 👏 👏

What to do to like ESLint and Prettier?

For our workshops, you don’t need to worry about installing these extensions but when you would like to work seriously with VueJS then ESLint extension, Prettier — Code formatter for VS Code and Step 4 from Anna Kozyrevas’ post will be necessary.

How to add Bootstrap?

When I stared to work with VueJS I was always trying to use poor Bootstrap as my framework, but sooner or later it was ending into moving to Bootstrap-Vue, that’s why we will add Bootstrap-Vue to our project from the start.

Getting started | BootstrapVue

Get started with BootstrapVue, based on the world's most popular framework - Bootstrap v4, for building responsive…

bootstrap-vue.js.org

We will use CLI to install Bootstrap-Vue, just copy below instructions:

npm install bootstrap-vue

And add to src/main.js file:

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

An example where to copy above code snippet

To test is everything ok we can copy the buttons code:

<div>
  <b-button variant="outline-primary">Primary</b-button>
  <b-button variant="outline-secondary">Secondary</b-button>
  <b-button variant="outline-success">Success</b-button>
  <b-button variant="outline-danger">Danger</b-button>
  <b-button variant="outline-warning">Warning</b-button>
  <b-button variant="outline-info">Info</b-button>
  <b-button variant="outline-light">Light</b-button>
  <b-button variant="outline-dark">Dark</b-button>
</div>

If everything will be fine you should see a similar result:

Bravo! 👏 👏 👏

Source: https://bootstrap-vue.js.org/docs/

Project

A little bit about the structure:

To main.js we are adding libraries or features.
App.vue is a main file of the project, it will contain the routing
In views, we are creating page views to which we will add components
In components, we are can create for example some reusable parts of our application (for example page footer)
In router, we are connecting views with their route (a link to them)