How i can use vue.runtime.esm-bundler.js?

To use vue.runtime.esm-bundler.js, you need to pre-compile your Vue templates. You can do this by using the @vue/compiler-sfc package. Here are the steps to follow:

1. Install the @vue/compiler-sfc package:

npm install --save-dev @vue/compiler-sfc

1. Create a vue.config.js file in the root of your project and add the following code:

const { createVuePlugin } = require('vite-plugin-vue2')
const { compileTemplate } = require('@vue/compiler-sfc')

module.exports = {
  plugins: [
    createVuePlugin(),
    {
      name: 'vue-template-compiler',
      transform(code, id) {
        if (id.endsWith('.vue')) {
          const { descriptor } = compileTemplate({ source: code })
          code = `
            <script>
              export default ${descriptor.script.content}
            </script>
          `
        }
        return {
          code,
          map: null
        }
      }
    }
  ]
}

1. Update your main.js file to import vue.runtime.esm-bundler.js instead of vue.esm-bundler.js:

import { createApp } from 'vue/dist/vue.runtime.esm-bundler.js'
import App from './App.vue'

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

1. Run your project and verify that it works as expected.

Note: If you're using Vue 2, replace createVuePlugin() with vuePlugin() in the plugins array.