Install nuxt dengan metode manual, pertama buat direktori

mkdir <nama-project>

Buat file package.json seperti ini:

{
  "name": "nama-project",
  "version": "1.0.0",
  "description": "My first fantabulous Nuxt.js project",
  "author": "arul",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

Setelah file package.json selesai dibuat install nuxt dengan npm

npm install nuxt

Buat folder pages untuk membuat halaman pertama

mkdir pages

Buat file pages/index.vue

<template>
  <h1>Hello world!</h1>
</template>

Jalankan project dengan mengetikan di terminal

npm run dev

Aplikasi sekarang berjalan di http://localhost:3000.

demikianlah pembuatan project dasar dari awal, sekarang kita coba akan menambahkan bootsrap-vue framework kedalam project nuxt kita

npm install bootstrap-vue

Tambahkan module bootstrap-vue/nuxt ke file config nuxt.config.js

export default {
  ssr: false,
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {}
  }
};

Sekarang kita akan coba modifikasi pages/index.vue dengan menambahkan component button

<template>
  <div>
    <h1>Hello World!</h1>
    <b-button>Basic</b-button>
    <b-button variant="danger">Danger</b-button>
    <b-button variant="success">Success</b-button>
    <b-button variant="outline-primary">Primary</b-button>
  </div>
</template>

Jalankan project dengan npm run dev, dan browse ke http://localhost:3000

Demikianlah pembuatan project dasar nuxtjs, kita akan bahas lebih dalam mengenai nuxtjs pada seri berikutnya.