How to serve cdn links for assets in NuxtJS?

Question

I am working on a NUXTJs to create server side rendered website. My question is that although there is a assets/static folder in nuxt project structure to serve images & static files, i want to set cdn link for all my image source. What would be the best approach to do that?

Possible ways I can think of:

1. Vuex Store - set baseURL for the images and then use in components
2. env - use environment variable to set the cdn URL

TIA

Answer 1

You can set it via publicPath property in nuxt.config

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

https://nuxtjs.org/api/configuration-build/#publicpath

Answer 2

If you have a team working on the project, use Vuex. It save the baseURL in the project itself. Less hassle to copy/share the env variables to the team.

Answer 3

Alright after spending a couple of hrs, As answered above you can set cdn url to nuxt.config.js file. If you are someone like me who is using CloudFront / S3 bucket, After npm run build. you can create nuxt folder to your s3 bucket and upload everything from .nuxt/dist/client to this folder. the public path looks as follows in nuxt config file

  build: {
    publicPath: 'https://your-cdn-url.net/nuxt'
  }

But for PWA,manifest.json file it is important that the manifest is served from the same domain, and not from the CDN.so you'll have to override the public path.you can find more info here

I'm using nuxt 2.15,syntax has to be exactly like as follows. nuxt.config.js

  modules: [

    [
      '@nuxtjs/pwa',
      {
        workbox: { publicPath: '/_nuxt/' },
        manifest: { publicPath: '/_nuxt/' },
      },
    ],


  ],

3rd issue that I faced was, I've created categories.json file and uploaded to s3 bucket and was calling from axios, to avoid any cors issue update s3 cors setting as follows

You can find this in s3 bucket -> Permissions then -> scroll below -> () Cross-origin resource sharing (CORS)

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]