The youtube-player icon appears on the screen, but the video does not play and an error with the video playback ID is displayed
<template>
<div class="container">
<YouTube url="https://youtu.be/GQmO52f26Ws" />
</div>
</template>
<script setup>
import YouTube from 'vue3-youtube'
</script>
vue3-youtube use src as source url and play video on ready state from video id.
You can replace your code with this format and get video in frame.
<template>
<YouTube
src="https://www.youtube.com/watch?v=jNQXAC9IVRw"
#ready="onReady"
ref="youtube"
/>
</template>
<script>
import { defineComponent } from 'vue'
import YouTube from 'vue3-youtube'
export default defineComponent({
components: { YouTube },
methods: {
onReady() {
this.$refs.youtube.playVideo()
},
},
})
</script>
Related
I have a Vue.js app and I want to use capacitor camera preview plugin.
But when I run the app on web I get this error on the console
Also it does not work in IOS as well.
Here is the documentation of the plugin
https://github.com/capacitor-community/camera-preview#readme
Here is my component
<template>
<div>
</div>
</template>
<script>
import '#capacitor-community/camera-preview'
import { CameraPreview } from '#capacitor-community/camera-preview';
const cameraPreviewOptions = {
position: 'rear',
height: 1920,
width: 1080
};
export default {
created() {
CameraPreview.start(cameraPreviewOptions);
}
}
</script>
I added id="cameraPreview" and my problem is fixed
<template>
<div id="cameraPreview">
</div>
</template>
I'm trying to add text-alignment plugin to my ckeditor build in vue js.
Following is my code for the same::
<template>
<div>
<nav-bar />
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" class="full-width"></ckeditor>
</div>
<router-view class="fixed-center"></router-view>
</div>
</template>
<script>
import NavBar from "components/NavBar.vue";
import ClassicEditor from "#ckeditor/ckeditor5-build-classic"
import Alignment from "#ckeditor/ckeditor5-alignment"
export default {
components: { NavBar },
name: "app",
data() {
return {
editor:ClassicEditor,
editorData:'<p>Content of the editor.</p>',
editorConfig:{
plugins:[Alignment],
toolbar:['Heading','bold', 'italic','alignment']
}
};
},
methods: {},
};
</script>
I'm getting following error ::
CKEditorError: ckeditor-duplicated-modules
The documentation is not enough to be able to do the emit. I have seen many tutorials and nothing works, now I am testing this
Child component
<div #click="$emit('sendjob', Job )"></div>
With the Vue DevTools plugin I can see that the data is sent in the PayLoad, but I can't find a way to receive this emit from the other component.
Many people do this
Any other component
<template>
<div #sendjob="doSomething"></div>
</template>
<script>
export default {
methods:{
doSomething(){
console.log('It works')
}
}
}
</script>
In my case it doesn't work
You should import the child component in the parent component and use it instead of the regular div tag.
I'm sharing examples for your reference to achieve emits in Vue 3 using <script setup> and Composition API. I strongly suggest going with <script setup if you are going to use Composition API in Single File Component. However, the choice is yours.
Example with <script setup>: https://v3.vuejs.org/api/sfc-script-setup.html
<!-- App.vue -->
<template>
<UserDetail #user-detail-submitted="userDetailSubmitted"/>
</template>
<script setup>
import UserDetail from './components/UserDetail';
function userDetailSubmitted(name) {
console.log({ name })
}
</script>
<!-- UserDetail.vue -->
<template>
<input type="text" v-model="name" #keyup.enter="$emit('user-detail-submitted', name)" />
</template>
<script setup>
import { ref } from 'vue';
const name = ref('');
</script>
Example using Composition API: https://v3.vuejs.org/api/composition-api.html
<!-- App.vue -->
<template>
<UserDetail #user-detail-submitted="userDetailSubmitted"/>
</template>
<script>
import UserDetail from "./components/UserDetail";
export default {
components: {
UserDetail,
},
setup() {
function userDetailSubmitted(name) {
console.log({ name });
}
return {
userDetailSubmitted
}
},
};
</script>
<!-- UserDetail.vue -->
<template>
<input type="text" v-model="name" #keyup.enter="$emit('user-detail-submitted', name)" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const name = ref('');
return {
name,
}
}
}
</script>
You should import this child-component in the parent. And don't rename it to the html's original tag.vue3. You'd better use the Composition API.
I'm using this package and in the documentation it says that we have to import it in main.js
import VueYoutube from 'vue-youtube'
Vue.use(VueYoutube)
How to import it in some Vue files only? So that my project won't have to import this package if it's not used in a certain pages. I have tried
<template>
<youtube :video-id="videoId" ref="youtube"></youtube>
</template>
<script>
import { YouTube } from 'vue-youtube'
export default {
components: { YouTube }
}
</script>
or
<template>
<youtube :video-id="videoId" ref="youtube"></youtube>
</template>
<script>
import { YouTube } from 'VueYoutube'
export default {
components: { YouTube }
}
</script>
but it still doesn't work. Thank you so much.
You can probably import it in main.js and it will be tree-shaken at some point by Webpack.
But if you want to use it in a single file only nonetheless, you can follow this github thread answer: https://github.com/anteriovieira/vue-youtube/issues/33#issuecomment-547745879
<template>
<youtube :video-id="videoId" ref="youtube"></youtube>
</template>
<script>
import { Youtube } from 'vue-youtube'
export default {
components: {
Youtube,
}
}
</script>
And it should work properly then !
How could i continue music playback even while changing pages using Vue js?
Principle of operation:
1. The user starts listening to music on page example.com
2. He goes to the example.com/about and the music he started to listen to doesn't stop.
I guess that i have to the music in the parent component as it’s own separate component, but i am not sure.
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import About from './components/About'
import Main from './components/main'
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Main },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
template: '<App/>',
components: { App },
router
}).$mount('#app');
About.vue
<template>
<div id="about">
<h1>The about page</h1>
<br>
<router-link to="/">Back to main page</router-link>
<br>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
main.vue
<template>
<div id="about">
<h1>The main page</h1>
<br>
<router-link to="/about">Go to about page</router-link>
<br>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
Create a new component for the audio, and import that into your App.vue and place it outside <router-view></router-view>. E.g:
/components/AudioComponent.vue (can't use Audio.vue because there is already an audio HTML element)
<template>
<audio controls oncontextmenu="return false">
<source src="../bruh.mp3">
</audio>
</template>
<script>
export default {
// maybe take the src filename and controls on/off attribute as props?
// maybe provide some methods for external control via an event bus or shared state
}
</script>
/App.vue
<template>
<div id="app">
<!-- put a shared header here, e.g. links to routes, top bar, sidebar menu, etc -->
<router-view></router-view>
<audio-component></audio-component>
<!-- put a shared footer here -->
</div>
</template>
<script>
import AudioComponent from './components/AudioComponent.vue'
export default {
name: 'app',
components: {
AudioComponent,
}
}
</script>