Nuxt•2mo ago

Reference assets with domain name

Is it possible to configure Nuxt to reference assets (images, js and css) with the full URL including the domain?

3 Replies

Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to configure Nuxt to reference assets with the full URL including the domain. There are a couple of approaches you can take depending on your specific needs: 1. For images specifically, you can use the alias option in the Nuxt Image module configuration. This allows you to specify aliases for src attributes, which can include the full domain. Here's an example:

export default defineNuxtConfig({
  image: {
    domains: [
      'images.unsplash.com'
    ],
    alias: {
      unsplash: '<https://images.unsplash.com'>
    }
  }
})

export default defineNuxtConfig({
  image: {
    domains: [
      'images.unsplash.com'
    ],
    alias: {
      unsplash: '<https://images.unsplash.com'>
    }
  }
})

With this configuration, you can use the alias in your NuxtImg components like this:

<NuxtImg src="/unsplash/<id>" />

<NuxtImg src="/unsplash/<id>" />

This will generate an image tag with the full URL:

<img src="/_ipx/unsplash/<id>" />

<img src="/_ipx/unsplash/<id>" />

Configuration (https://image.nuxt.com/get-started/configuration#alias) 2. For other assets like JS and CSS, or if you need a more general solution for all links, you can use a custom NuxtLink component. This approach allows you to prepend the domain to all links:

<nuxt-link v-slot="{ route, navigate }" to="/calculators" custom>
  <a :href="'<https://example.com'> + '/calculators'" @click="navigate">
    Go to {{ route.fullPath }}
  </a>
</nuxt-link>

<nuxt-link v-slot="{ route, navigate }" to="/calculators" custom>
  <a :href="'<https://example.com'> + '/calculators'" @click="navigate">
    Go to {{ route.fullPath }}
  </a>
</nuxt-link>

This will generate a link with the full domain:

<a href="<https://example.com/calculators"></a>>

<a href="<https://example.com/calculators"></a>>

Stack Overflow Post (https://stackoverflow.com/questions/77416876) Remember that while these solutions can help you generate full URLs, they may have implications for your application's behavior, especially if you're using server-side rendering or need to deploy to multiple environments. Always test thoroughly to ensure your site functions as expected across all scenarios. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@712351223482810390> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bnasonOP•2mo ago

This is what I came up with: ~~/server/plugins/meta-base.ts

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:html', (html, { event }) => {
        html.head.unshift(`<base href="https://foo.example.com/" />`)
    })
})

export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:html', (html, { event }) => {
        html.head.unshift(`<base href="https://foo.example.com/" />`)
    })
})

Gaming

Programming

Reference assets with domain name