Nuxt3 Support

[pisandelli]

Hello guys! I tried to add the plugin into a NUXT3 app using vite, but it seems not to be working. Am I doing something wrong? I'm using the latest version (RC4) from Nuxt3.
My nuxt.config.ts is like this:

import { defineNuxtConfig } from 'nuxt'
import { VitePluginFonts } from 'vite-plugin-fonts'

export default defineNuxtConfig({

  vite: {
    plugins: [
      VitePluginFonts({
        google: {
          families: [{name:'Barlow', styles:'wght@100;300;400'}]
        },
      })
    ]
  }

})

[pisandelli]

Hello! Any help?
Thanks in advance.

[RobbieTheWagner]

@pisandelli Did you ever figure this out? What is not working exactly? For me, I get a 404. GET http://localhost:3000/_nuxt/@vite-plugin-fonts/fonts.css net::ERR_ABORTED 404 (Not Found)

[stafyniaksacha]

This plugin can not work with nuxt3 since it uses transformIndexHtml vite function which is not used by nuxt

We have to create a nuxt3 module which injects tags inside the nuxt app.head config

[pisandelli]

@pisandelli Did you ever figure this out? What is not working exactly? For me, I get a 404. GET http://localhost:3000/_nuxt/@vite-plugin-fonts/fonts.css net::ERR_ABORTED 404 (Not Found)

Hey @rwwagner90 for me the fonts are not being added.
But with this answer from @stafyniaksacha everything make sense now.
I'm using useHead from VueUse as a solution.

Thanks for @stafyniaksacha for clarifying this issue.

[RobbieTheWagner]

I just manually added my fonts to the app.head config for now. @pisandelli do you have an example to share of how to make this work?

[stafyniaksacha]

For nuxt and google font you can use this:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        {
          rel: 'preconnect',
          href: 'https://fonts.gstatic.com',
          crossorigin: true,
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@200..800&display=swap',
        },
      ],
    },
  },
})

[pisandelli]

I'm using a composable.
Much better the app.head approach, though.

//composabels/useGoogleFonts.ts

import { useHead } from '@vueuse/head'

export function useGoogleFonts() {
  useHead({
    link: [
      {
        rel: 'preconnect',
        href: 'https://fonts.googleapis.com'
      },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: 'crossorigin'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'
      }
    ],
  })
}

And call it in my app.vue

<script lang="ts" setup>
 import { useGoogleFonts } from './composables/useGoogleFonts'
 useGoogleFonts()
</script>