Search code examples
javascriptvuejs3jsx

How to use Vue 3 with JSX syntax in CDN mode？

I want to use Vue 3 in CDN mode, and use JSX syntax to develop. How to configure it?

Solution

  • Babel cannot be configured in a CDN mode with Vue.js. You need a processor like Webpack, Rollup, or Vite, etc., for that purpose.

    Source: comment

    Instead of using CDN applications, it's generally more convenient to use a build tool, so you can easily customize the production code (e.g., minify it) while keeping the convenience of the development code.

    You can easily create a project with Vue.js and JSX syntax support using vuejs/create-vue.

    Alternative: Use CDN with Template

    Similar solution to what you want to achieve. However, this doesn’t solve the problem you want to use Babel for.

    // CDN Vue Import
const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const msg = ref("hello world")
    
    return { msg }
  },
  template: `
    <div>{{ msg }}</div>
    <input v-model="msg" />
  `
}).mount('#app')
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app"></div>