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

yarn

You can run it using

yarn run dev

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

bootstrap-vue

yarn add bootstrap-vue

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

  modules: [
    'bootstrap-vue/nuxt'
    ]

CSS style

Install sass support

yarn add node-sass sass-loader --dev

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

.logo{
    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: [
    '@/assets/css/main.scss'
  ]

Customize default layout

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

<template>
  <div class="logo">
    <nuxt/>
  </div>
</template>

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'

Vue.use(VueI18n)

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."
  }
}

# Convention-Over-Configuration

Building an application with Nuxt