Skip to content

Nuxt tricks

Jump to bottom
Sebastian Urchs edited this page Aug 22, 2023 · 5 revisions

Injecting HTML head attributes

<head> is the default place for some things like meta tags, but also for linking external js scripts, for example from a CDN. In Nuxt, we can inject e.g. a JS script from a CND into the <head> tag of all attributes using the nuxt.config.js file:

head: {
    title: 'My Tool name',
    script: [
      {
        src: 'https://my.cdn.com/happyscript',
      },
    ],

See the official docs here

Using environment variables on the client side

By default, reading from a .env file (with in nuxt means that the variables declared in the.env` file get exposed to the server AND the client. This isn't a good thing, because you might have some secrets in there that you don't want to share with the client.

What's worse: when you provide an environment variable by declaring it in the environment when you call nuxt, it does not get exposed to the client! In other words, .env and export MYVAR=hello behave differently.

For this reason, Nuxt has deprecated reading environment variables using the dotenv module: https://v2.nuxt.com/docs/configuration-glossary/configuration-env/. Instead we now explicitly set which variables (whether from .env or shell variable) should be only visible to the server, and which should visibile to the server and the client (see here and here).

Clone this wiki locally