Nuxt.jsインストール手順備忘録

Nuxt.jsインストール備忘録

• バージョン 2.12.1

---

• CDでインストールするディレクトリに移動
• 以下のコマンドでインストール
• project-name はプロジェクトの名前を入れる

npxを使う場合

npx create-nuxt-app <project-name>

yarnを使う場合

yarn create nuxt-app <project-name>

? Project name

? Project name xxx

• プロジェクト名を入力

? Project description

• 説明を入力

? Project description xxxxxx

Author name

• 作者の名前を入力

? Author name xxx

Choose programming language

• TypeScriptを使うか選択

? Choose programming language (Use arrow keys)
❯ JavaScript
  TypeScript

Choose the package manage

• YarnとNpmのどちらかを使うか選択

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

Choose UI framework

• UIフレームワーク使うか選択

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

Choose custom server framework

• サーバーサイドのフレームワークを選択

? Choose custom server framework (Use arrow keys)
❯ None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

Choose the runtime for TypeScript

• Runtimeを使うかの選択
• Runtimeについてはドキュメント参照
  • https://typescript.nuxtjs.org/ja/guide/runtime.html

? Choose the runtime for TypeScript (Use arrow keys)
❯ Default
  @nuxt/typescript-runtime

Choose Nuxt.js module

• Axios と PWA を使うか選択
• スペースキーでチェックを付けます

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ DotEnv

Choose linting tools

• 静的解析の選択

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint

Choose test framework

• ユニットテストの選択

? Choose test framework (Use arrow keys)
❯ None
  Jest
  AVA

Choose rendering mod

• SSRかSPAの選択

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
  Single Page App

Choose development tool

• jsconfig.jsonと Semantic Pull Requestを入れるか選択
• jsconfig.jsonはVS Code向けのツール
• Semantic Pull RequestはGitHub向けのツール

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

インストール完了

起動する

yarnの場合

yarn run dev

npmの場合

npm run dev

• http://localhost:3000/ にアクセス

ビルド

• dist 以下にファイルが出力される

yarn run build

generate

• dist 以下にHTMLの静的ファイルが出力させる

yarn run generate

その他

Sassを使う

• Sassをインストール

npm install --save-dev node-sass sass-loader

• vueファイルでlang="scssまたはlang="sassにするとSassが使える

<style lang="scss" scoped>

Pugやcoffeeも可能

• ドキュメントはこちら
  • https://ja.nuxtjs.org/faq/pre-processors/

Pug

npm install --save-dev pug@2.0.3 pug-plain-loader

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

CoffeeScript

npm install --save-dev coffeescript coffee-loader

<script lang="coffee">
export default data: ->
  { name: 'World' }
</script>

.vue以外の独自で作るCSSを読み込む

• nuxt.config.js のcssの部分にファイル名を入れる

css: [
  '@/assets/css/main.scss'
],

ルーティング

• this.$route でURLが取れる
  • 例 this.$route.params.str
• リンクを貼るときはnuxt-link :to=""を使う
• パラメーターで動的に使うには _id.vue のようにファイル名にアンダースコアを付ける

<nuxt-link :to="'/xxx">リンク</nuxt-link>

• generateするときに吐き出したいファイルを指定する時はnuxt.config.jsに設定する
• 例 /controller/actionの時

generate: {
  routes: [
    '/controller/action'
  ]
}

メタタグ

各ページのメタタグの設定

• head()で設定できる

head () {
  return {
    title: this.meta.title,
    meta: [
      { hid: 'description', name: 'description', content: '' },
      { hid: 'keywords', name: 'keywords', content: '' },
      { hid: 'og:type', property: 'og:type', content: '' },
      { hid: 'og:title', property: 'og:title', content: '' },
      { hid: 'og:description', property: 'og:description', content: '' },
      { hid: 'og:url', property: 'og:url', content: '' },
      { hid: 'og:image', property: 'og:image', content: '' },
    ]
  }
}

毎ページに入れるのも面倒なので、mixinsにまとめて変数にするのもあり

↓mixinsを作っておく

export default {
  head () {
    return {
      title: this.meta.title,
      meta: [
        { hid: 'description', name: 'description', content: this.meta.description },
        { hid: 'keywords', name: 'keywords', content: this.meta.keywords },
        { hid: 'og:type', property: 'og:type', content: this.meta.type },
        { hid: 'og:title', property: 'og:title', content: this.meta.title },
        { hid: 'og:description', property: 'og:description', content: this.meta.description },
        { hid: 'og:url', property: 'og:url', content: domain + this.meta.url },
        { hid: 'og:image', property: 'og:image', content: domain + this.meta.image },
      ]
    }
  }
}

↓mixinsを読ませてメタタグのテキストを変数にして受け渡す

import meta from '~/mixins/meta'

export default {
  data() {
    return {
      meta: {
        title: 'タイトル',
        description: 'ディスクリプタ',
        keywords: 'キーワード',
        type: 'article',
        url: '/controller/action',
        image: '/share.jpg',
      }
    }
  },
  mixins: [meta]
}