Charger des feuilles de style externes dans Nuxt 3 : comment faire ?

Question

J'essaie de charger une feuille de style mapboxgl dans une application Nuxt 3.0.0-rc.8. Normalement, pour les projets Vue, je l'ajoute manuellement en tête de la page index.html.

Cependant, ce n'est évidemment pas la façon de procéder dans Nuxt 3. J'ai essayé de l'ajouter aux options head et css dans le fichier nuxt.config.ts sans succès. J'ai remarqué que lorsque je l'ai ajouté au tableau CSS, il a été ajouté à mon en-tête, mais le "https://" a été remplacé par "_nuxt".

Je sais qu'il me manque quelque chose de simple. Voici mon fichier de configuration :

export default defineNuxtConfig({
  css: [
    '~/assets/css/main.css',
  ],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
  buildModules: ['@pinia/nuxt'],
  runtimeConfig: {
    treesAPIKey: '',
    public: {
      baseURL: '',
      mapToken: '',
    },
  },
  head: { link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }] },
});

Answer 1

Utilisez app.head而不是head.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: 'https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' }]
    }
  }
})