Nuxt Detect Environment
February 20, 2020production, development, server, client, static
Production vs Development
You can check via process.env.NODE_ENV
which usually have a value of production
or development
.
This variable is available at nuxt.config.js
as well.
export default {
axios: {
port: process.env.NODE_ENV == 'production' ? 80 : 3000
}
}
NOTE: You can load different dotenv based on NODE_ENV
Note that this is a build-time environment variable, not a runtime environment variable.
nuxt
:process.env.NODE_ENV == 'development'
nuxt build
:process.env.NODE_ENV == 'production'
nuxt generate
:process.env.NODE_ENV == 'production'
Server, Client or Static
You can check for
process.server
: Server (SSR)process.client
: Client (Browser JavaScript)process.static
: When you runnuxt generate
. If you want to execute certain code on server (like reading a local file which is not available on the client), you needif (process.static && process.server)
.
Sadly, process.server/client/static
is not available in nuxt.config.js
. The way to go around this problem is to use plugins or some config which support function.
You can import specific library (only available for node/server environment. e.g. fs
) or read local file / make http request depending on the environment.
if (process.static && process.server) {
const fs = require('fs')
const data = JSON.parse(fs.readFileSync(`static/data/config.json`, 'utf8'))
}
else {
const { data } = await $axios.get(`/data/config.json`)
}
You specify specific plugins file to execute on specific environment only, or you can have a generic plugins file which check for process.server/client/static
.
Edit nuxt.config.js
.
export default {
plugins: [
'~/plugins/vue-notification', // both client and server
{ src: '~/plugins/vue-notification-client', mode: 'client' },
{ src: '~/plugins/vue-notification-server', mode: 'server' }
]
}
There is also a <client-only>
tag for template.
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn