vuetify インストール
下記のコマンドでインストール
yarn add @nuxtjs/vuetify --no-bin-links
nuxt.config.jsに下記の記述を追記する
$ vi nuxt.config.js
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/vuetify'
],
dotenvインストール
下記のコマンドでインストール
yarn add --dev @nuxtjs/dotenv --no-bin-links
nuxt.config.jsに下記の記述を追記する
$ vi nuxt.config.js
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
['@nuxtjs/dotenv', { filename: '.env.prod' }]
],
.envファイルに設定したい値を記述する
vi .env
API_KEY=ba25d3ae6eba40c49eb150c45ebcd665
この状態で起動すると下記のエラーが発生する
This dependency was not found:
- fs in ./node_modules/@nuxtjs/dotenv/dist/index.js
To install it, you can run: npm install --save fs
下記のgithubのissueをもとにnuxt.config.jsを修正する
https://github.com/nuxt-community/dotenv-module/issues/11
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
},
extend (config, { isDev, isClient }) {
config.node = {
fs: 'empty'
}
}
},
そしてvueファイルの記述に
<template>
<v-app>
<v-alert type="success">
{{ key }}
</v-alert>
</v-app>
</template>
<script>
require('dotenv').config()export default {
props: {
},
data: () => ({
key: process.env.API_KEY
})
}
</script>
画面にenvファイルに指定したAPI Keyが表示される
自分が検証しているPCはこちらです。
|