nuxt.js入門メモ

nuxt.jsの自分用入門メモ

nuxt.jsとは？

SPAを気軽に作れるvue.jsのフレームワークでSSRが使いやすいのが特徴。

インストール方法

ハマったところ

「Nuxt.jsプロジェクトをv2(nuxt-edge)にアップグレードした際にハマったところ」
https://qiita.com/sho_yamane/items/ce0d40450d373152eb18

installしたら

Module build failed: TypeError: Cannot read property 'eslint' of undefined

とでたので上記の記事の対応を

各fileでexport defaultを多用

nuxtはcomponentで管理するので基本的にはfileごとに分けてexport,importを多用します。基本的にはexport defaultでscriptを書いて命名しなくてもimportしやすくする場合が多いです。

ディレクトリ構造

ここに各ディレクトリの役割が

viewを作成したいとき

pagesに.vueファイルを置く

pagesに置かれた.vueファイルがvuerouterにより自動的にルーティングされる。部品はcomponents、レイアウトはlayoutsで管理する。

layouts管理

基本的にはdefault.vueを読み込むがlayoutsフォルダに他vuファイルを作成し、下記で指定。

<script>
export default{
 layout: 'single'
}
</script>

componentの呼び出し方

layouts/default.vue

<template>
 <logo/>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

dataの書く場所

viewをレンダリングするにあたり使うdataはviewを書いているcomponentごとに定義する必要がある。defaultの中に書いてあるからその中でレンダリングしているcomponentに書かなくていいというわけではない。

headタグ内の設定

nuxt.config.jsで行う

nuxt.config.js

module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  },
  build: {
    /* before
    extend(config, { isClient, isDev }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    } */
    /* after */
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

ルーティング

でリンクを張りたいとき

vue.js

<template>
  <nuxt-link :to="mypageUrl">マイページ</nuxt-link>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'sampleComponent',
  computed: {
    ...mapState({
      mypageUrl: (state) => `/mypage/${state.userId}`
    })
  }
}
</script>

動的なページ作成

例

• _idなど_で動的なルーティングを指定
• 各pagesのscriptでthis.$route.params.idなどで受け取る
• 受け取ったparamsなどをもとにapiで情報取得
• {}などで情報を内に出す

CSSフレームワークを導入したい時

bootstrap_vue