The 2 slides on the homepage and the Revolution PLugin only needs to run for that component. I am only sharing code for one slide to keep things simple.
To get things partially working I have loaded the revolution slider js files in the head of the index file.
<script type="text/javascript" src="/revolution/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="/revolution/js/jquery.themepunch.revolution.min.js"></script>
I then load the JS needed to load the sliders at the end of the index file just before the closing body tag. This slides only load if the homepage is the initially loaded route for Vue. If I navigate away from the home page and then back the slides do not load again.
jQuery("#rev_slider_1_1").show().revolution({
// slider options ...
});
</body>
I have tried to move this code into the home component within the mounted property.
mounted () {
this.$nextTick( function() {
jQuery("#rev_slider_1_1").show().revolution({
// slider options ...
});
});
}
When I do this I get revolution is not a function
TypeError: jQuery(...).show(...).revolution is not a function
In the end I need to be able to navigate to the homepage from within my Vue App and have the sliders load without a full page load.
Related
I want to create a landing page for a documentation and I dont any layout option. How can I create a landing that points to a Vue component directly?
---
layout: none
---
<Landing />
<script setup>
import Landing from "./components/Landing.vue"
</script>
I want one page to be empty. Just my component.
As it turns out there is no way to implement a page without layout page, home or doc in vitepress. More info.
I want to use the library like Vimeo Player SDK with Nuxt.js.
<template>
<iframe
id="video01"
ref="video01"
src="https://player.vimeo.com/video/{videoID}">
</iframe>
</template>
<script>
import Player from '#vimeo/player'
export default {
created () {
const iframe = this.$refs.video01
const player = new Player(iframe)
}
}
</script>
But I cannot get DOM.
In case of SPA, I couldn't get DOM.
So error log is here.
TypeError: You must pass either a valid element or a valid id.
In case of SSR, window cannot use.
So error log is here.
window is not defined
Can't I use Vimeo Player SDK with Nuxt.js?
Did you try the vue-vimeo-player package? It could be helpful to have something managed the Vue way.
For the SPA, you will need to wait for the element to be on the page; hence try your code in a mounted hook (created step is before anything get mounted to the DOM).
If you want SSR too, you could try to wrap the whole thing into a
<client-only>
<! --- note I used vue-vimeo-player and not the vimeo-player --->
<vue-vimeo-player ref="player" :video-id="yourVideoID"/>
</client-only>
Here is a repo that I've created to show you how simple it is to make it work: https://github.com/kissu/so-nuxt-vimeo/blob/master/pages/index.vue
It made me find that you should use the <vue-vimeo-player /> component and not <vimeo-player />.
However, I imported the Vue wrapper for Vimeo Embed Player in the demo locally in a Vue component.
I'm new to Vue and currently trying to dynamically change the video or image source link by passing the data in through a prop. I created a component with specific template structure that I would like to pass in the source from the main app.js page. I've tried binding it in both areas but unsure if I'm doing it correctly. I tried using regular divs and stuff to embed the video in app.js and it shows the content perfectly.
parent element contains 'Video' component-
<Video theme="IL" :vidSrc="srcIL.vid"></Video>
import Video from "./components/Video.vue";
export default {
name: "App",
components: {
Video
},
data() {
return {
srcIL: {
vid: "./assets/invi-lines/invisible-lines-film.mp4"
}
};
}
child 'Video component'
<template>
<div class="introVid top">
<video controls :src="vidSrc"></video>
</div>
</template>
<script>
export default {
props: ["theme", "vidSrc"]
};
</script>
This seems like you have it set up properly, and it is hard to know exactly what is causing the issues from the info provided, but I'm going to make a guess that it might be that the asset is not getting bundled.
I tried using regular divs and stuff to embed the video in app.js and it shows the content perfectly
I suspect you had something like:
<video controls src="./assets/invi-lines/invisible-lines-film.mp4"></video>
which would have taken the resource from the assets and packaged it for use.
see relative-path-imports for details.
You can try forcing these to load using require somewhere in the project, which will force the compiler to copy the asset, but really, if you have dynamic assets (assuming there's more than a handful and they can change) you should have them in the public folder already, not in the source folder. So my recommendation is that you move the dynamic assets to the public folder (assuming that was your issue to begin with)
So I'm trying to add Vue3 to an existing asp.net core project. What I'd like to happen is for my razor app to render as normal, then use custom vue components to give my frontend a more reactive feel. However, when I mount an empty vue app to my wrapper div (parent of all other body content), it seems to be deleting all innerHTML of that wrapper div, completely removing all server rendered body content.
In my _Layout.cshtml file, I'm wrapping all content in a div with id 'app'.
<body>
<div id='app'>
#RenderBody()
</div>
<script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
<script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>
in main.js
import { createApp } from 'vue'
const vueApp = createApp({}).mount('#app');
// component definitions below
With the app set up like this, when I run my .net project I see a blank white browser window instead of the razor compiled html that I expect. In Vue2, it was possible to do this:
const vueApp = new Vue({
el: '#app',
data: {
....
},
methods: {
....
}//, etc
});
Which would result in the app being rendered as normalthe vue app bound to #app, making vue available to the child content (model binding, vue click handling, etc).
I've tried playing around with the isHydrate optional parameter on mount(), but it causes no change in the result.
Am I missing something here? How do you slowly migrate an existing project to use vue3 if you can't mount the app without clearing content? Any guidance is much appreciated.
Thank you
Notes:
vue-next runtime-dom source If this method is the mount method getting called, I'm not sure why container.innerHTML would not be getting set in the component. {} is not a function, and render/template is not defined for it.
vue-next runtime-core apiCreateApp source If this is the method getting called....I have no idea.
Update
Vue 3, without template renderer, will not be able to handle the templates after it has been compiled. To fix that, you can import vue/dist/vue.esm-browser (and vue.runtime.esm-browser.prod for prod), instead of the default vue. This will allow run-time component rendering.
Think about a wordpress blog, or a standard CMS with some content. I use a wysiwyg editor (CKEditor) to write my contents and save them to db.
I want to use some Vue components inside this HTML, and so I add a wrapper div to my theme. HTML pages are wrapped by
<div id="#my-custom-app">
...html from server
</div>
Basically I want to add for example
<my-app-image-compare></my-app-image-compare>
using CKEditor inside my HTML, then I will create an app mounted on #my-custom-app div. I will insert the app at the end of the html body.
Vue.app file doesn't have a template, the template is basically my HTML page written with CKEditor, but every component is loaded and defined by the app and every component has a template.
How can I do? Is there a way to have a main Vue app file without a defined template?
Option 1:
First create a vue container on a basic template. This template will then load a component which gets your data from the sever and displays it, so:
// This is your main vue instance container
<div id="#my-custom-app">
<dynamic-html v-if="myHtmlFromServer" template="myHtmlFromServer"></dynamic-html>
</div>
Within this main component, you need to hook up created event and populate myHtmlFromServer with your HTML content from the editor.
import DynamicHtml from './myComponents/DynamicHtml'
new Vue({
el: '#my-custom-app',
data () {
return {
myHtmlFromServer: ''
}
},
components: {
DynamicHtml
}
created () {
// this.myHtmlFromServer = this.getDataFromServer()
}
})
The <dynamic-html> component, would have props: ['template'] and on the created event would assign this.$options.template = this.template.
This option will set the HTML template of that component and allow Vue to render it as normal (meaning you can then do {{someVal}} in your CKEditor.
Option 2:
Another option is if you're using a server side language like PHP, then you could just put that html on the page i.e echo $myHtmlContent and as long as that content contains <div id="#my-custom-app"> you Vue instance will mount. PHP will add the HTML to the page before the JS processes the page so it'll just work.