Blank page with vuejs 3 after vue serve

Viewed 177

Hi I do not know what happens really, because I have tried with two different libraries and they did not work.

I have installed VueJS 3, I did it with Vue Client.

It installed correctly and it worked, then I tried to create a view or component where I can see a video so I do these steps:

  1. Step one:

    npm i v-video-embed It worked correctly

  2. Step two: I open main.js and I make these changes:

     import { createApp } from 'vue'
     import App from './App.vue'
     import Embed from 'v-video-embed'
    
     const app = createApp(App).mount('#app')
     app.use(Embed)
    

How you can see I just add import Embed from 'v-video-embed', then I add const app and then I add app.use(Embed)

  1. Step three:

    I create the view or component like this:

    <template>
     <video-embed src="https://www.youtube.com/watch?v=s4ObxcdXoFE"></video-embed>
     <video-embed src="https://vimeo.com/362754811"></video-embed>
     <video-embed src="https://dai.ly/x7n7y06"></video-embed>
    
    </template>
    
    <script>
    
    
    </script>
    

I save and then I run vue serve, it displays me localhost:8080 I put this on browser and the issue it is that it does not display anything just a blank page... and it does not display any console error.. so I wonder what am I doing wrong?

Thanks

1 Answers

The use method is used with root instance created by createApp(App) not the root component which is created by app.mount('#app'), so you should use use before mount:

import { createApp } from 'vue'
 import App from './App.vue'
 import Embed from 'v-video-embed'

 const app = createApp(App)
 app.use(Embed)

 app.mount('#app');

Related