Support for Vite generated template

[nicoabie]

What problem does this feature solve?

Currently the instructions to make vue-router@next with vue@next do not take into consideration the scenario where the vue application was generated by vite and has a module bundler such as rollup. The instructions just demonstrate that it is possible make it work with an index file that points to CDNs and has a script tag.

Trying to follow those instructions with a generated vue template and making the necessary teaks such as not pointing to the CDNs because there is already a main file that resolves those imports results in an error.

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"

The way I managed to solve it was:

import { createApp } from 'vue/dist/vue.esm-bundler.js'
import { createRouter, createWebHashHistory } from 'vue-router'

As I didn't like that reference there I tried tweaking vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import alias from '@rollup/plugin-alias';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      plugins: [
        alias({
          entries: [{ find: 'vue', replacement: '/node_modules/vue/dist/vue.esm-bundler.js' }]
        })
      ]
    }
  }
})

But it unfortunately didn't work.

It would be really nice if vue-router@next has an official documentation describing how to make the router work in that scenario since in these days vite is gaining a lot of traction.

Thanks in advance,
If needed I can provide a repository showing the issue but it is very easy to replicate.

What does the proposed API look like?

There is no change in the api itself, just support for vite module bundler.

[posva]

Duplicate of #829

[posva]

You don't need to configure anything to make vue router work with Vite

[nicoabie]

@posva If that is the case why I can't make it work with this line that would be the correct:
import { createApp } from 'vue'
And I have to hack it pointing to a specific bundler?
import { createApp } from 'vue/dist/vue.esm-bundler.js'

I was getting an error:
[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js"

Could you point me to the right direction?

This worked for me in vite.config.ts
export default defineConfig({ define: { 'process.env': {} }, plugins: [vue()], resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } } })

[nicoabie]

@sparrowhawk-ea that makes a lot of sense, thanks a lot!!!

[yuber83]

@sparrowhawk-ea thanks,
you save me a lot of time.

[grefl]

Hmmm. I had the same problem. Except @sparrowhawk-ea's solution fixed my issue.

Considering all the upvotes for @sparrowhawk-ea post I think it worth a mention from the maintainers why this is still a common thing for people to come across. @posva