Use Environment-Specific Nuxt Configurations

Ready for your weekly Vue & Nuxt dose?

‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏

Weekly Vue News #140

Use Environment-Specific Nuxt Configurations

View online

Hi 👋

I switched from Buffer to Pallyy as my social media management platform. It's built with Vue & Nuxt and Tim Bennetto gave me a discount for sharing his tool in this week's issue. Thanks Tim 💚.

Have a nice week ☀️

Vue

📕 What Makes a Good (Vue) Component Library? A Checklist

👉🏻 In this article, Daniel gives you a checklist of items he thinks are essential to think about if you need to choose a Vue component library.

📕 Using Google Gemini With Flask, Vue and Vite

👉🏻 In this tutorial, Ethan shows how to implement Google's Gemini AI using Python Flask, Vue and Vite.

🛠️ Create Vue3 App

👉🏻 This tool uses Vite to help you spin up a new Vue-based app using tools based on answers you give to a number of questions.

Nuxt

📕 Nuxt's Server-Only Components should be on your radar

👉🏻 They will only send the rendered HTML to the client.

👉🏻 The source code of that component is not needed on the client side.

📕 How to use Nuxt MDC to render markdown documents in your Nuxt or Vue project

👉🏻 With the latest changes to the Nuxt MDC module, you can now render markdown and MDC within your normal Vue app.

📹 Server Components Keep Getting Better

👉🏻 Matt gives you an update on Nuxt server components.

🎧 The Need for Server-Side Rendering (SSR)

👉🏻 In the first episode of the DejaVue podcast, Michael Thiessen and Alexander Lichter discuss Server-Side Rendering with Vue and Nuxt.

🔥 Nuxt Tip: Use Environment-Specific Configurations

It sometimes happens that you need to have different configurations for different environments in your Nuxt.js application. I'll show you how to use environment-specific Nuxt configurations.

Let's start with a simple nuxt.config.tsnuxt.config.ts file:

1export default defineNuxtConfig({
2  app: {
3    head: {
4      title: 'My App'
5    }
6  }
7})

For demonstration purposes, let's assume that we want to have a different title in development and production. You might be tempted to use an environment variable like this:

1export default defineNuxtConfig({
2  app: {
3    head: {
4      title: process.env.NODE_ENV === 'development' ? 'My App (Dev)' : 'My App'
5    }
6  }
7})

This approach is not recommended by Nuxt, instead, you should use the fully typed, per-environment overrides like $production$production, $development$development or $test$test in your nuxt.confignuxt.config file. Here's how you can do it:

1export default defineNuxtConfig({
2  app: {
3    head: {
4      title: 'My App'
5    }
6  },
7  $development: {
8    app: {
9      head: {
10        title: 'My App (Dev)'
11      }
12    }
13  }
14})

The $development$development key is a special key that allows you to define a Nuxt configuration for the development environment. This configuration is merged with the default configuration when running in development mode. This mechanism is powered by c12, a smart configuration loader available in the UnJS ecosystem.

If you're authoring layers, you can also use the $meta$meta key to provide metadata that you or the consumers of your layer might use.