How to set up a new Vue project with Webpack and Bulma using the Vue CLI.

Vue CLI

Vue CLI is a simple yet powerful CLI that you can use to scaffold Vue projects.

Install Vue CLI Globally:

# Using Yarn
yarn global add vue-cli

# Using NPM
npm install -g vue-cli

You can now use the Vue CLI to scaffold projects. There are a number of templates available, but this article focuses on Webpack.

Scaffold a Project

To scaffold a Vue project with the Webpack template:

# Move into a suitable location
cd /var/www/html

# Scaffold a Vue/Webpack project into /var/www/html/new-project.dev
vue init webpack new-project.dev

Install Dependencies

Move into the new project directory and install the base dependencies:

# Using yarn:
yarn install

# Using NPM:
npm install

Add Dependencies

Add Bulma:

# Using Yarn
yarn add bulma

# Using NPM:
npm install bulma

# To add multiple packages with Yarn, separate with a space. e.g.:
yarn add axios bulma

Run Dev server

# Using Yarn
yarn dev

# Using NPM
npm run dev

Connect Up Bulma

Add a suitable SASS manifest file that you’ll use to import all your SASS modules:

# From project root:
touch src/assets/sass/main.scss

Open this file and import the main Bulma Sass file:

// src/assets/sass/main.scss
@import '~bulma/bulma'

Note that the tilde symbol refers Webpack/sass-loader to the node_modules directory.

You then need to reference this in Webpack’s main entry point, src/main.js:

// src/main.js
import Vue from 'vue';
import App from './App';
import router from './router';

// Require the main Sass manifest file
require('./assets/sass/main.scss');

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

Bulma Sass - Additional Dependencies

Note that to compile Sass, Webpack needs the node-sass node module and the Webpack sass-loader module.

Add these to your project dependencies:

yarn add node-sass sass-loader

You can now run yarn dev to build your development server.

Problem With Ubuntu Snap-Installed Atom (code editor) and Webpack Server

You may experience problems because xdg-open does not run properly when launched within Atom (i.e. in platformio-ide-terminal) when Atom has been installed by means of a Ubuntu snap. This is because there is a GTK+ 2.x and GTK+ 3 conflict.

To resolve this, you can manually specify the browser to be used when the Webpack server is triggered. Amend build/dev-server.js by passing in a preferred browser as a second parameter into the call to node-opn:

devMiddleware.waitUntilValid(() => {
  console.log('> Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    // Set the browser here!
    opn(uri, {app: 'firefox-developer'})
  }
  _resolve()
})