Runtime compilation version of Vue?

[ipearx]

I'm trying to load a different Vue component on each Laravel route/view. In Vue 2 I would compile all components into a single app.js file, load a single vue app onto the root element in the Laravel blade template, and then each individual blade template would render an appropriate tag to load the correct component for that page.

However with Vue 3 I'm not sure how it should work. I'm guessing I need to NOT specify a template in the initial root element? Then what's rendered in the blade templates can be used instead. Does that mean I need a version of vue that supports runtime compilation as the templates can't be pre-compiled?

However when I do this I get this error:

const app = createApp({})
app.component('ft-header', require('./components/FtHeader.vue').default);
app.component('ft-register', require('./components/Auth/FtRegister.vue').default);
app.mount('#app');

[Warning] [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". (2) (app.js, line 1137)
" at <App>"

Is there a way to change the which version of Vue I'm using? Or am I barking up the wrong tree anyway?

[KABBOUCHI]

Are you using runtime 'template' option?

make sure u add render function to this:

+ import App from "./App.vue"

-const app = createApp({})
+const app = createApp(App)

[ipearx]

Hey thanks, yes that original method you gave me works well, and for only a single page app it's perfect. But then I'm stuck with the template inside App.vue component. I want to specify the component to load inside my individual blade files so it can be different on each page e.g. imagine I have a blade file called 'mycomponent.blade.php':

@extends('template')

@section('content')
   <div id="app">
    <my-component></my-component>
   </div>
@endsection

I'd like my-component to be loaded, whereas at the moment it only shows what's included in the template in the App.vue file. If I remove the template (leaving App.vue a blank file), it gives the error listed above. What do you mean "Are you using runtime 'template' option"? what is it and how to I set it? Hopefully I'm just a dummy and missing the obvious?

[KABBOUCHI]

u need to use the esm version but vue tree-shaking will not work

//webpack.mix.js
mix.webpackConfig({
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm-bundler.js'
            },
        },
    })

[ipearx]

Ok, I'll have a play, and see what happens. Thanks for your help

[alaamebrahim]

@KABBOUCHI Thanks, that worked but changed vue$ to vue