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

nuxt.js導入とかPWA化のメモ

More than 1 year has passed since last update.

前置き

vue初心者こと私がnuxtでのPWAの設定をとりあえず頑張ったときのメモとかエラーとか。

準備

vue-cliのインストールをしていなかったらいれる。

npm install -g vue-cli

インストールと起動(スターターテンプレートで始める)

スターターテンプレートがあるようなのでそれをいれてみる。

nuxt-community/starter-template

vue init nuxt-community/starter-template プロジェクト名
cd プロジェクト名
npm install

起動してみる

npm run dev

http://localhost:3000で確認

インストールと起動(ノースターターテンプレート)

スターターテンプレートを使わずにいれる。
作業フォルダ内にpackage.jsonを作成、または既存のものを修正したり、一から作る場合とか。

package.json
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}
npm install --save-dev nuxt

スターターテンプレートはディレクトリ構造通りにフォルダがあるけど、
nuxt単品でインストールした場合は自分でディレクトリを作っていれる

nuxt公式ディレクトリ構造

  • assets
    • コンパイルが必要なjsやcssをいれる
  • static
    • コンパイルしなくてもいい静的ファイル
  • components
    • パーツとしてのvueファイル(ヘッダーのみとか、検索バーのみとか)
  • pages
    • ルーティングしたページ単位のvueファイル。レイアウトより内側
  • layouts
    • 大枠のvueファイル
  • middleware
    • ルーティングしたそれぞれのルートで使う共通のロジック
  • plugins
  • store

pages ディレクトリ作成

mkdir pages

index.vueを作って下記をいれる

index.vue
<template>
  <h1>Hello world!</h1>
</template>
npm run dev

http://localhost:3000で確認可能

エラーが出たらnodeのバージョンを疑ってみる

nodeのバージョンがひくいと動かない。
nuxtjsの公式でのnodeの推奨バージョンを見つけきれなくて、古めのnodeでやったので
私の環境では$npm run dev時に下記のエラーで止まった。

const policies = this.options.render.csp.policies ? {...this.options.render.csp.policies} : null

他のプロジェクトですでに古いバージョンのnodeが入ってたら、
下記などを参考にnodebrewで元々使っていたバージョンのnodeととりあえずstable(最新版)をいれて、プロジェクトに応じて切り替えるようにした

nodebrewでnode.jsのバージョン切り替え

設定

設定はインストールディレクトリ直下にあるnuxt.config.jsをいじる
基本的に変更しなくても動くので必要に応じて書き換える。

nuxt公式:設定

PWA化

@nuxtjs/pwaをインストールして設定する

npm install --save-dev @nuxtjs/pwa
nuxt.config.js
  modules: [
    '@nuxtjs/pwa'
  ],
  manifest: {
    name: 'nuxt-start',
    lang: 'ja',
    short_name: 'nuxt',
    title: 'nuxt-startです',
    'og:title': 'nuxt-startです',
    description: 'nuxt-startです',
    'og:description': 'nuxt-startです',
    theme_color: '#ffffff',
    background_color: '#ffffff'
  },
  workbox: {
    dev: true, //開発環境でもPWA
  },

git管理してる場合は、吐き出されたServiceWorker(sw.jsとかって吐き出される)を無視したいので.gitignoreに追加

.gitignore
sw.*

ビルドしてからサーバー起動してみる

npm run  build
npm run start 

http://localhost:3000

デベロッパーツールでService Workerが動いているか確認

scssをつかえるようにする

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

.vueでstyleタグにlang="scss"をつけるとscssが使えるようになる

globalにscssを使えるようにする

nuxt公式:外部リソースを使うには?
nuxt公式:プリプロセッサを使うには?
nuxt公式:css プロパティ

nuxt.config.jsに設定追加

プロジェクト内でsass/scssを使ってプリセッサ使う場合

nuxt.config.js
  css: [
    { src: '~assets/sass/main.scss', lang: 'scss' }
  ],

assets/sass/にとりあえずsassっぽい記述でmain.scssを作る

main.scss
@charset "utf-8";

@mixin fs($size: 24, $base: 16, $important: false) {
  @if $important == 'important' or $important == true {
    $important: ' !important';
    font-size: $size + px'#{$important}';
    font-size: ($size / $base) * 1rem'#{$important}';
  } @else {
    $important: '';
    font-size: $size + px;
    font-size: ($size / $base) * 1rem;
  }
}

.fs42 {
  @include fs(42);
}

レイアウトから呼び出すのでlayoutsのdefault.vueに下記を追加

default.vue
<style lang="scss">
  @import '~assets/sass/main.scss';
</style>
index.vue
  <h2 class="subtitle fs42">
    nust-start project
  </h2>

netlifyでサクッとアップロード

Netlify

Netlifyについては下記が詳しい。

高機能ホスティングサービスNetlifyについて調べて使ってみた

下記を参考にサクッと設定

Nuxt.jsで作ったものをそこそこ簡単な方法で公開する

netlifyのエラーでデプロイ失敗した(´・ω・`)

bitbucket(非公開)で使用。
コミットしたら勝手にビルドしてくれるけどエラーは下記

Error running command: Build script returned non-zero exit code: 1

Nuxt.JSをNetlifyで公開しようとするとビルドできない問題をなんとかするを参考にnodeのバージョンを指定してみたり、
リポジトリを公開にしてみたけど同じエラーが出た。

nuxtの公式のissuesに行き着いて解決:sob:
https://github.com/nuxt/nuxt.js/issues/219#issuecomment-278494315

NetlifyのDeploy settingsをnpm run build && npm run generateに変更したらビルドできた。

Netlify is for static hosting so you need to generate your website with Nuxt.

Netlifyは静的なホスティングなので、Nuxtのビルドしないとだめよって。
これを読んで気づいたけど、gitignoreでdistがコミット対象から外されてたorz

ブックマークに追加してchromeと独立してアプリとして動くか確認

こちらが丁寧にスクショで説明されてるので割愛
Nuxt.js で作った静的サイトを PWA 化する

ルーティング

nuxt公式:ルーティングの基礎

ルーティングは設定なしでできた。

pages/
--| user/
-----| index.vue
--| index.vue

上記のようにuser/index.vueを追加して
http://localhost:3000/user
にアクセスするとできてたページができてた。すげえ。

vuetifyとfont-awesomeを入れてみる

参考:Nuxt.js で CSS フレームワークを 3 つ試した。

インストール

npm install --save @nuxtjs/vuetify
npm install --save @nuxtjs/font-awesome

モジュールを追加

nuxt.config.js
  modules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/font-awesome'
  ]

vuetifyjs公式を参考に使えるようにしてみる

default.vue
<template>
  <div id="app">
    <v-app>
      <my-header />
      <nuxt />
      <my-footer />
    </v-app>
  </div>
</template>

vuetifyjs公式→UI componentにフッターの例があったので入れてみる

footer.vue
<template>
  <v-footer height="auto">
    <v-card
      flat
      tile
      class="indigo lighten-1 white--text text-xs-center"
    >
      <v-card-text>
        <v-btn
          v-for="icon in icons"
          :key="icon"
          icon
          class="mx-3 white--text"
        >
          <v-icon size="24px">{{ icon }}</v-icon>
        </v-btn>
      </v-card-text>
      <v-card-text class="white--text pt-0">
        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </v-card-text>
      <v-card-text class="white--text">
        &copy;2018 — <strong>Vuetify</strong>
      </v-card-text>
    </v-card>
  </v-footer>
</template>
<script>
export default {
  name: 'Footer',
  data: () => ({
    icons: ['fab fa-facebook', 'fab fa-twitter', 'fab fa-google-plus', 'fab fa-instagram']
  })
}
</script>

font-awesomeのiconがなんかイタリックになっちゃう

共通scssに下記を追記してごまかした修正してみた

common.scss
.icon {
  &:before {
    font-family: FontAwesome;
    font-style: normal;
  }
}

iconにリンクがつけれるようにしてみる

footer.vue
<template>
  <v-footer height="auto">
    <v-card
      flat
      tile
      class="indigo lighten-1 white--text text-xs-center"
    >
      <v-card-text>
        <v-btn
          v-for="icon in icons"
          :key="icon.id"
          icon
          class="mx-3 white--text"
          v-bind:to="icon.url" // 追加
        >
          <v-icon size="24px">{{ icon.name }}</v-icon> // 名前を呼び出す
        </v-btn>
      </v-card-text>
      <v-card-text class="white--text pt-0">
        Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </v-card-text>
      <v-card-text class="white--text">
        &copy;2018 — <strong>Vuetify</strong>
      </v-card-text>
    </v-card>
  </v-footer>
</template>
<script>
export default {
  name: 'Footer',
  data () {
    return {
      icons: [// 名前とurlを返すように修正
          { name: 'fab fa-facebook', url: '/' },
          { name: 'fab fa-twitter', url: '/user' },
          { name: 'fab fa-google-plus', url: '/' },
          { name: 'fab fa-instagram', url: '/user' },
        ]
    }
  }
}
</script>
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
ユーザーは見つかりませんでした