Help us understand the problem. What is going on with this article?

Nuxt開発時に詰まったところメモ

More than 1 year has passed since last update.

概要

Nuxt2で開発してる時に詰まったところメモ

こちらを見る前に、
Nuxt.jsの本格導入で遠回りしないためのTips v1.1

が詰まりやすいところまとまってるので確認すること。

クライアントとサーバでAPIアクセスするURL変えたい

こちらにオプションがある。
https://axios.nuxtjs.org/options#browserbaseurl

axios: {
  baseURL: 'http://localhost:3000',
  browserBaseURL: 'https://testsite.jp',
  proxyHeaders: true
}

https://axios.nuxtjs.org/options#proxyheaders
proxyHeaders を追加すると、SSRの時に、header情報が送られる。
Cookieを送ることができるので、API側で、下記みたいな感じにCookie取得できるはず。

cookies = request.headers["Cookie"].split('; ').map do |cookie|
  cookie.split('=')
end.to_h

componentの中でnoscriptを使いたい

JSオフの時に、アラート出すみたいな感じでnoscriptタグ使いたい時がある。
issue内にある通り、nuxt.config.jsに追加すればできる。
https://github.com/nuxt/nuxt.js/issues/2582

あるいは、app.htmlを作って、デフォルトのテンプレートに、noscriptタグをhtmlに書いてもできた。
https://ja.nuxtjs.org/guide/views/

storybookを使いたい

https://qiita.com/k-okada/items/afe442f7b328fb0041e1
みたいにしたら使えた。

下のように、全体を読み込むcss変数を設定した場合、
https://ja.nuxtjs.org/api/configuration-build/#styleresources

nuxt.config.js
build: {
  styleResources: {
    scss: './assets/stylesheets/variables.scss'
  }
}

こんな風にstorybookのconfigファイルを変更するとエラーが起きない。

storybook/webpack.config.js
{
  test: /\.scss$/,
  loaders: [
    "style-loader", "css-loader", "sass-loader",
    {
      loader: "sass-resources-loader",
      options: {
        resources: [
          path.resolve(__dirname, '../assets/stylesheets/variables.scss')
        ]
      }
    }
  ],
},

SSRしたい時、どの処理をどこに書けばいいの?

図解
nuxt-schema.png

nuxtのssrするときの流れは上みたいな感じ。

  • nuxtServerInit
    • serverアクセス時に一度しか呼び出されない。
    • 認証機能の時によく使われるとのこと
  • middleware
    • ルーティングした後に、最初に呼ばれる
    • 全体のmiddleware、layoutのmiddleware、Pageのmiddlewareの三種類設定できる。
    • userAgentに関するデバイス判定処理とか、ログインしてるかしてないかでページ分けるとかする。
  • validate
    • 動的なルーティングを行う際に、パラメータによってvalidateするのに使う
    • storeのデータを使ってvalidationも可能
    • fetchより先に呼び出されるから、APIから取得したデータをfetch()で、storeに入れる方法はできない。
    • その場合は、エラー処理の方法を使う
  • fetch
    • SSR時に、APIから取得した情報とかをstoreに入れたい時使う
  • asyncData
    • SSR時に、Dataを設定したい時に使う
    • fetchとasyncDataは出来ること一緒だけど、storeに入れたいか、dataとして使いたいかで使い分けるといいらしい
    • Nuxt.jsのasyncDataとfetchの違いについて

あったらどんどん追記

okadak
WEB系の企業で働いています。
https://okadak1990.hatenablog.com/
roomclip
日本最大級の住まいと暮らしのSNSメディア「RoomClip」の開発・運営を行っています
https://corp.roomclip.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした