Level 51
Have you watched this series: https://laracasts.com/series/learn-vue-3-step-by-step?
Nov 16, 2022
4
Level 12
Vue 3 components in blade
Hi. I started using vue 3 in my laravel app. I can remember in vue 2 I could use only single components in blade when do: <mycomponent /> But now when i mount the app to the #app id, everything is replaced and i have a blank page. This is what i have:
``php import {createApp} from 'vue'; import HelloWorld from './components/HelloWorld';
const app = createApp();
app.component('HelloWorld', HelloWorld)
app.mount('#app'); ``
I want that nothing changes. Only when i use in my blade, i want to have the text i put into the tamplate tag in HelloWorld.vue. Can somebody help? Each tutorial i found is with a full spa.
Level 4
@jaseofspades88 answering a question with a question. That must have been quite useful!
2 likes
Level 28
Vue 2 had runtime compilation by default. In Vue 3, that runtime compilation behavior is not part of the default build in order to reduce script size. You need to use it explicitly. You can do it in two ways. The most common and centralized one is by using an alias in your Vite config:
export default defineConfig({
// ...
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
})
The other (and less common) way is to import it instead of vue in your JavaScript:
import { createApp } from 'vue/dist/vue.esm-bundler';
1 like
Level 12
Thx for your help. Not sure why, but no it works, without esm-bundler. It just works with the laravel framework out of the box. I changed
"laravel-mix": "^6.0.49", => "laravel-mix": "^6.0.0", and now use "vue": "^3.2.37".
Maybe it works, because I removed
"minimum-stability": "dev"
... but for me its just important that it works now and i can go on. Thx for help.
Please or to participate in this conversation.