Nuxtでauth-routesを動かすメモ

下の公式サイトのものをnuxt-edgeでアップグレードしているので、うまく動かなかったので動かすメモ
ついでに、Bulmaを入れる。

ja.nuxtjs.org

Nuxtのスターターテンプレートを使ってNuxtを使えるようにする。ドキュメントにあるようにserver.jsをコピーする。
このままだとnuxt.config.jsを読み込まないので、31行以下を書き換える。
nuxt.config.js

// オプションとともに Nuxt.js をインスタンス化
let config = require('./nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
const nuxt = new Nuxt(config)

// プロダクション環境ではビルドしない
if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build()
}
app.use(nuxt.render)
app.listen(3000)
console.log('Server is listening on http://localhost:3000')

server.jsを読み込ませるためにpackage.jsonを書き換える。(ドキュメント通りと同じ)
cross-envはyarnやnpmで入れる必要がある。
package.json

"scripts": {
  "dev": "node server.js",
  "build": "nuxt build",
  "start": "cross-env NODE_ENV=production node server.js"
}

ストアはドキュメントと同じ

次に、ログイン済みの場合は指定のページにアクセスできますが、ログインしていない場合は/へ飛ばすようにする。 middlewereで作成すればmiddleware: 'auth'で使えるようになる。
auth.js

export default function({store, redirect}) {
  if(!store.state.authUser) {
    return redirect('/');
  }
}

これでとりあえず、ログインしていない場合のコントロールまで

次に、Bulmaを入れる。
Bulmaは変数を使ったりしていじりたいのでSASS/SCSSで使用する。
SASS/SCSSを使うためにsass-loader node-sassを入れる。
インストールはyarn add bulma sass-loader node-sass CSSのライブラリをグローバルで使用するためにはnuxt.config.jsへ追加する。
nuxt.config.js

module.exports = {
  css: [
    { src: 'bulma/bulma.sass', lang: 'sass' }
  ]
}

これでとりあえず、Bulmaは使えるようになるが、カスタムはできないので、assets/css/main.scssを作成してConfigの文を変える。

css: [
  { src: '@/assets/css/main.scss', lang: 'scss' }
]

あとは、main.scssでBulmaを使うためにBulma公式のSCSSのページから持ってきたソースでは動かないのでいじる。

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather",
"Georgia",
serif;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;
// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);
// 5. Add new color variables to the color map.
@import "~bulma/sass/utilities/derived-variables.sass";
$addColors: ( "twitter":($twitter, $twitter-invert), "linkedin": ($linkedin, $linkedin-invert), "github": ($github, $github-invert));
$colors: map-merge($colors, $addColors);
// 6. Import the rest of Bulma
$variable-columns: false;
@import "~bulma/bulma";

(main.scssを汚くしたくないならこれを_bulma.scssにして、main.scssへ@import 'bulma'にする)

これでとりあえず、動くのでログインフォームを作る。

これらのコードは以下でいじっていく。
GitHub - NISHI3/nuxt-login: Nuxtの公式ドキュメントの認証ルートをいじってるもの