Nuxt.js」タグアーカイブ

Nuxt(Vue)のコンポーネントから環境変数を使う方法

サンプルコード

NUXT_ENV_IMG_URL='https://hoge.com:10000/v1/json'
export default {
    computed: {
        img: () => {
            return (
                process.env.NUXT_ENV_IMG_URL + "foo.png"
            );
        },
    }
}

解説

Nuxtでは、プロジェクトのルートフォルダに置く.envで、環境変数を設定できる。ただし、prefixでNUXT_ENV_を変数名に付けないと、コンポーネントから参照できない。

コンポーネントからは、process.env.NUXT_ENV_*の形で参照できる。

公式ドキュメント
https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

Nuxt.jsでBodyタグにクラスを指定する方法

サンプルコード

export default {
    // ...
    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        title: 'something',
        htmlAttrs: {
            lang: 'en'
        },
        bodyAttrs: {
            class: 'hoge-class'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    //...
}

解説

Nuxtでは、HTMLタグやBODYタグが自動生成されてしまうため、classを直接指定出来ないが、nuxt.config.js内でクラスを指定できる。

Nuxt.jsでFullCalendarを使う方法

コンポーネント

Nuxt(Vue)で、FullCalendarを使うには、vueコンポーネントの<template>内に、コンポーネントとして以下の様に読み込む。

<template>
    <div>
        <FullCalendar :options="config" >
    </div>
</template>

Vuexとの連携

Vuexと連携して、FullCalendarの内容を更新するには、optionsで指定するmodelをcomputedで動的に返す必要がある。

例えば、eventsというstoreの中にスケジュールデータが入っており、getterからスケジュールデータを取得する場合、configOptionsの返値の中のeventsで、storeのgetterを与えるようにする。

    computed: {
        config() {
            return {
                ...this.configOptions,
            };
        },
        configOptions() {
            return {
                firstDay: 1,
                editable: false,
                navLinks: false,
                selectable: false,
                events: this.events,
                weekends: this.weekendsVisible,
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                initialView: "dayGridMonth",
            }
        }
        //...
        ...mapGetters("events", ["events"]),
   }

詳しくは、こちらのコードを参照
https://github.com/fullcalendar/fullcalendar-example-projects

Nuxt.jsでFirebaseからサインアウトさせる方法

.vueファイル内で

methods: {
    signOut() {
        firebase
            .auth()
            .signOut()
            .then(() => {
                this.$router.push("/login");
                this.$store.commit("/user/setIsLogin", false);
            });
    },
},

firebase.auth().signOut()でサインアウトできる。
上の例では、処理後、

  • サインイン(ログイン)ページに自動遷移
  • Vuexのサインインフラグをfalse

にしている。

Vuetifyのボタンにnuxt-linkをつくる

HTML

<template v-slot:item.actions="{ item }">
    <v-btn :to="`desserts/${item.id}`" nuxt icon>
        <v-icon small>mdi-pencil</v-icon>
    </v-btn>
</template>

解説

:to
<v-btn>に、Vue Routerのリンクをつくるには、:toスロットを使う
上の例では、/dessets/_id.vueへのリンクを生成している。(_idの部分は、${item.id}が自動的に置換される)

nuxt
nuxt-linkを有効にする

icon
icon表示型のボタンを生成する

Nuxt.jsでGoogle Analyticsを使う方法

@nuxtjs/google-analytics
https://www.npmjs.com/package/@nuxtjs/google-analytics
というモジュールを使う

google-analyticsのインストール

yarn add --dev @nuxtjs/google-analytics

nuxt.config.jsの設定

以下、追加

export default {
  build: {
    buildModules: ["@nuxtjs/google-analytics"],
    googleAnalytics: {
      id: "UA-12301-2"
    }
  }
}

idは、各自のものに書き換える。

Nuxt.JSで開発・本番の環境変数を切り替える方法(Vercel編)

Nuxt.JSのSPAなコンテンツをVercelで公開するのを前提に、環境変数を設定する方法。callbackのURLを開発環境とProduction(本番)環境で自動的に切り替えるのに便利。

例えば、callbackされるURLを以下のように切り替える場合など

#開発環境
http://localhost:8080/callback
#本番環境
http://foobar.app/callback

dotenvのインストール

開発環境と本番環境で切り替えたい内容は、dotenvというライブラリで管理する。yarnでインストール(npmでもOK)

$ yarn add --dev @nuxtjs/dotenv

dotenvの設定(開発環境)

プロジェクトのルートディレクトリに、.envファイルを作り、開発環境時の環境変数を指定する。本番環境用の値は、後ほど、Vercelの設定画面で設定する。

REDIRECT_URI="http://localhost:8080/callback"

.envファイルを複数作り、環境によって切り替える方法もあるが、Nuxt.jsの公式では、単一の.envファイルの使用を推奨。

.gitignoreに追加

.envで設定した値は、セキュリティー上、公開されない方が良い場合も考えられるので、git管理下には置かない。

#以下、追加
.env

nuxt.config.jsの設定

以下、追加

require("dotenv").config();
const { REDIRECT_URI } = process.env; #使用する環境変数名

#以下は、export default 内に
export default {
  buildModules: ["@nuxtjs/dotenv"],
  env: {
    REDIRECT_URI #使用する環境変数名
  }
}

.vueファイルからの参照

export default {
  data() {
    return {
      redirectURI: process.env.REDIRECT_URI
    };
  }
}

Vercel(本番環境)の設定

Vercelでは、環境変数の値を設定し、build時に自動的に埋め込める機能がある。これを使って、本番環境の値を入れ込む。

設定したいプロジェクトの「Settings」を選ぶ。

画面後半にあるEnvironment Variablesで、環境変数名と値を登録する。なお、登録された値は暗号化されるので、表示&確認することはできないので注意。

次回ビルドされたときに、登録した値に置換される。

参考

https://crieit.net/posts/VercelZeit-Now-Nuxt-js-2020

https://qiita.com/taichi0514/items/3939af222dee21a44413https://blog.ikedaosushi.com/entry/2019/04/17/220317

https://qiita.com/yfujii1127/items/c77bff6f0177b4ff219e