Sushi karaage
自己紹介 このサイトについて 開発ログ
  1. top
  2. nuxt.jsを使ってみる

nuxt.jsを使ってみる

2021/04/28

Nuxt.js

ずっと Angular を使っていたけど他に勉強するべきだと思ってきた。
Attribute bind などのテンプレートシンタックスが近い vue.js でのフルスタックフレームワークでなんかやりたい。
なので nuxt.js を使う。

インストール

https://ja.nuxtjs.org/docs/2.x/get-started/installation/
create-nuxt-app と 自分でセットアップする方法の2種類がある。
今回は create-nuxt-app を使う。

npx create-nuxt-app karaage-nuxt
# 色々聞かれるので設定をする
...

npm run dev

ディレクトリ構成

karaage-nuxt
├── assets          # assets
├── components      # コンポーネント
├── layouts         # レイアウト
├── middleware      # ミドルウェア
├── pages           # ページ
├── plugins         # プラグイン
├── static          # 静的ファイル
├── store           # storeファイル (vuex)
└── nuxt.config.js  # 設定ファイル

cliツール

...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
...

起動

npm run dev

もしくは

npx nuxt

ビルド

npm run build # or > npx nuxt build

generate との違いは静的ホスティングするときに使用するかどうか。

pages

https://ja.nuxtjs.org/docs/2.x/directory-structure/pages 基本的にはvueのコンポーネントと同じ考えで良い（はず）。 nuxt.js側でpageで必要なカスタム関数が追加されている。

asyncData

asyncDataはdataで必要な値を非同期的に取得するためのメソッド。

import { Context } from '@nuxt/types';
import { Component, Vue } from "nuxt-property-decorator";

interface ItemParams{
  [id:string]:string
}

@Component({
  components: {}
})
export default class PagesItem extends Vue {
  itemId:string = ""

  get getId() {
    return this.itemId;
  };

  async asyncData(context:Context):Promise<any> {
    let { params } = context;
    return {
      itemId:(params as ItemParams).id
    }
  }
}

fetch

fetch は asyncData と違い毎回走るのではなく、
サーバーサイドではレンダリング時
クライアントサイドでは遷移時 に走る（SPAのみの場合 asyncData とあんまり変わらないのでは…）

単純に head に挿入したい meta などを記述する。 https://ja.nuxtjs.org/docs/2.x/features/meta-tags-seo

プロパティ

layout

使用するlayoutの設定

loading

https://ja.nuxtjs.org/docs/2.x/directory-structure/pages#loading-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3

transition

ページ遷移時のアニメーションの設定

scrollToTop

ページの一番上にスクロールさせるか

watchQuery

watchしたいQueryPramsを設定する

middleware

使うmiddlewareを設定する

要調査