NuxtでuseHeadで.envの環境変数を扱う方法
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- useHead
を使って、
<meta name="description" content="メタ情報">このような、
メタ情報を表示をするために、
設定を試した。
その時のメモは、
以下を参照してほしい。
こちらを対応した上で、
一部の値を環境変数として、
- .env
のファイルに、
値を持たせたかったので、
その方法を試した。
ちなみに、
Nuxtのバージョンについても、
バージョン２系ではなく、
バージョン３系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
useHeadを試した時のメモ
Nuxtの設定の中で、
useHeadについては、
SEO and Meta
のページに記載されています。
こちらに関しては、
公式サイトの情報と、
試した時のメモの記事を載せておきます。
.envの環境変数の値を使う
上記の対応に加えて、
実際の設定したい値の一部を、
.envの環境変数に値を持たせることを試します。
公式情報としては、
こちらを参考にしてください。
https://nuxt.com/docs/guide/going-further/runtime-config
上記をもとに、
試していきます。
環境変数のファイルとして、
.envのファイルに、
SAMPLE="sample value"このように、
環境変数として値を設定します。
こちらを、
nuxt.config.tsに設定を追加します。
上記の公式サイトで、
export default defineNuxtConfig({
runtimeConfig: {
// The private keys which are only available within server-side
apiSecret: '123',
// Keys within public, will be also exposed to the client-side
public: {
apiBase: '/api'
}
}
})
こちらについて、
When adding apiBase to the runtimeConfig.public,
Nuxt adds it to each page payload.
We can universally access apiBase in both server and browser.
と丁寧に書かれており、
値のアクセスに関しても、
const runtimeConfig = useRuntimeConfig()
console.log(runtimeConfig.apiSecret)
console.log(runtimeConfig.public.apiBase)
という形でアクセスができると記載があります。
こちらを組み合わせて試すと、
export default defineNuxtConfig({
runtimeConfig: {
// The private keys which are only available within server-side
apiSecret: '123',
// Keys within public, will be also exposed to the client-side
public: {
sample: process.env.SAMPLE
}
}
})
こちらの設定をすることで、
各ページの中で、
<script setup>
const runtimeConfig = useRuntimeConfig();
console.log(runtimeConfig.sample);
</script>で実際にアクセスでき、
値を確認すると、
sample valueという値が取得できていれば、
うまく動いているので、
こちらの仕組みを使って、
環境変数を扱っていくと良いですね。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。
