Building an application with Nuxt

Nuxt is a wrapper of vueJs that allows to quickly bootstrapping web aplication using convention over configuration.

Install vue-cli

yarn global add vue-cli

Create a nuxt project

Using vue-cli, it is easy to bootrap a nuxt projectµµ.

vue init nuxt-community/starter-template  <project-name>

Build the project


You can run it using

yarn run dev

Your site is available at http://localhost:3000


yarn add bootstrap-vue

Add bootstrap-vue in the module section of nuxt.config.js.

  modules: [

CSS style

Install sass support

yarn add node-sass sass-loader --dev

Create a sass file /assets/css/main.scss

    background-image: url(/logo.png);
    background-color: #ffffff80;
    background-repeat: no-repeat;
    background-position-x: right;
    background-blend-mode: lighten;

Add a logo.png file in /static it will be automatically be binded to http://localhost:3000/logo.png Configure the page to be loaded globally in the css section of nuxt.config.js.

  css: [

Customize default layout

Open /layouts/default.vue and add class="logo" to the main div.

  <div class="logo">

This style will be applied to every pages.

Add axios

Add axios dependency

yarn add axios

Modify nuxt.config.js

  build: {
    vendor: ['axios']

Add vue-i18n plugin

yarn add vue-i18n

Create a the file /plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'


export default ({ app }, inject) => {
    // Set `i18n` instance on `app`
    // This way we can use it in middleware and pages `asyncData`/`fetch`
    app.i18n = new VueI18n({
        /* `VueI18n` options... */

Modify nuxt.config.js

  build: {
    vendor: ['vue-i18n']
  plugins: ['~/plugins/i18n.js']

Create the file locales/en.json It may look like this.

  "links": {
    "home": "Home",
    "about": "About",
    "english": "English version",
    "french": "French version"
  "home": {
    "title": "Welcome",
    "introduction": "This is an introduction in English."
  "about": {
    "title": "About",
    "introduction": "This page is made to give you more informations."