Vue.js CDN Integration

Introduction

A Vue website can serve its HTML from the website origin while a CDN delivers the compiled stylesheets and JavaScript. This reduces the distance between visitors and the static files needed to display and run the page.

This guide shows how to configure a CDN Service Domain for a Vue application built with Vite. The example uses Vue 3.5.43 and Vite 8.3.2.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

How to enable CDN in Vue with Vite

  1. Open vite.config.js in the Vue project root. Set Vite's base option to the HTTPS URL of your CDN Service Domain: 
    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: 'https://barsoom-cdn.cdnsun.org/',
  build: { assetsInlineLimit: 0 },
})

    Replace the sample domain with your CDN Service Domain and retain the project's other settings. Vite uses base when it writes asset URLs into the production build. The assetsInlineLimit setting keeps even small imported assets as separate files in this example; omit it if the default inlining behavior suits your project.

  2. Keep the Vue entry point and imported styles in the Vite build. For example, src/main.js imports the root component and stylesheet: 
    import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')

    In index.html, keep the Vite entry script as a module pointing to /src/main.js. During the production build, Vite replaces that source reference with a fingerprinted JavaScript file and adds the generated stylesheet URL. Assets referenced through Vite imports and CSS URLs also use the configured base path. Hard-coded URLs assembled at runtime are not rewritten by this setting.

  3. Install the project dependencies and create the production build from the project root: 
    npm install
npm run build

    Vite writes the website to dist/. Check dist/index.html: its compiled CSS and JavaScript URLs should begin with your CDN Service Domain.

  4. Deploy the complete dist/ output to the website origin. Keep the assets/ directory and its fingerprinted filenames unchanged. The CDN Service Domain must be able to fetch each file from the corresponding path on the origin. Keep the HTML document at the website origin; the CDN serves the compiled assets.
  5. Ensure cross-origin access is enabled for the generated JavaScript modules. The browser requires an appropriate CORS response header when it loads a module from the CDN Service Domain. For guidance, see Using custom fonts with CDN - setting CORS.
  6. If the site has an interactive Vue control, use it to confirm that the JavaScript runs after deployment. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.
    Styled Vue website with a working interaction and compiled assets delivered through CDNsun

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

  _  _     _____   __    __  
 | \| ||  |  ___|| \ \\ / // 
 |  ' ||  | ||__    \ \/ //  
 | .  ||  | ||__     \  //   
 |_|\_||  |_____||    \//    
 `-` -`   `-----`      `