Level 104
https://vuejs.org/guide/components/registration.html#global-registration
import Example from './components/Example'
const app = createApp({})
app.component('example', Example)
app.mount('#app')
Feb 18, 2022
11
Level 17
Register Vue 3 components
I used Vuejs 2 on my projects and in some views at the bottom of each one I put my Vuejs instance, and in app.js just register Vuejs globally and register Vuejs components.
Everything working fine but today I wanted to upgrade to Vuejs 3 but the problem is that when I register Vuejs 3 components I have to mount it to an HTML element and this makes problem with the instance in each view. app.js in Vue v2:
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example', require('./components/Example.vue').default);
app.js in Vue v3:
require('./bootstrap');
window.Vue = require('vue');
import { createApp } from 'vue';
import example from './components/Example.vue';
createApp({
components: {
example
}
}).mount('#app');
The instance in view page also mounted to #app, I tried to make view instance to another element but still not working.
Level 17
@tykus I did the same thing. Just the syntax is different.
Level 104
@Armani what did you do; share your code?
Level 17
@tykus I already shared my code but as I said there is another instance of Vue inside view:
const app = Vue.createApp({
data() {
return {
message: 'just test'
}
}
}).mount('#app')
This is the error:
[Vue warn]: Failed to resolve component: example
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <App>
1 like
Level 104
@Armani that's not similar to the code I shared with you.
1 like
Level 1
Hello @Armani,
You were able to solve this error, I am trying to update from VUE 2 to VUE 3. But many of my components are not being found.
I already tried as you mentioned, but it hasn't worked either.
1 like
Level 14
This is what I am doing for my vue components
first of all make sure that you've vue included in your webpack.mix.js
mix.js('resources/js/app.js', 'public/js').vue() // including .vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
]);
if (mix.inProduction()) {
mix.version();
}
Then my boostrap.js has following code,
import {createApp} from 'vue'
window.createApp = createApp;
app.js
require('./bootstrap');
import App from './App.vue'
if (document.querySelector('#app')) { // using this code here as my app.js is at multiple places
const app = createApp(App);
app.mount('#app');
}
1 like
Level 17
I still can't make it work, in Vue v2 it was working this way but in Vue v3 it can not be. Because in Vue v2 when you register a component globally it doesn't need to mount it to anything but in Vue v3 you have to use mount() function.
Level 104
Because in Vue v2 when you register a component globally it doesn't need to mount it to anything
That's not correct; you are not mounting the component, you are mounting the root Vue instance.
Did you use the code like I shared yesterday?
import Example from './components/Example'
const app = createApp({})
app.component('example', Example)
app.mount('#app')
Level 17
@tykus Yes I tried your code but because we have two instance of Vue a conflict will happen. Is it possible to define Vue as you provided and in blade view exdend it (I mean build the createApp object in blade view)?
Level 47
Please or to participate in this conversation.