I have a vue app like this:
Vue.component('navigation', Navigation)
Vue.component('create', Create)
Vue.component('how', How)
Vue.component('about', About)
Vue.component('youtube', Youtube)
new Vue({
el: '#app',
data: {
currentView: 'create'
},
mounted() {
pace.start()
}
})
So what I want to achieve is for pace to start while a component is loading and stop it when it is finished loading that component, however, pace is not being started. Am I not doing it properly here?
Related
I have the following code...
<html>
<head></head>
<body>
<div id="app">
{{ message }}
<jrg-element></jrg-element>
</div>
<script type="module">
import Vue from "//unpkg.com/vue/dist/vue.esm.browser.js";
import {ShadowElement, CREATE_ELEMENT} from "//unpkg.com/#jrg/ui/target/jrg-ui.esm.mjs";
class JrgElement extends ShadowElement {
constructor() {
super("<h1>CustomElement</h1>");
this.render();
}
}
CREATE_ELEMENT("jrg-element", JrgElement, {});
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
But when I run I get....
If I comment out the Vue portion everything works fine. How do I use Custom elements with Vue?
Update
I tried updating to ...
CREATE_ELEMENT("jrg-element", JrgElement, {});
Vue.config.ignoredElements = ['jrg-element']
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
But I still get...
The result is the Vue element renders but the custom element does not.
Full Code
Update 2
I tried waiting until the dom is loaded like...
document.addEventListener("DOMContentLoaded", function() {
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
});
But same outcome
With Vite 2, it's like this:
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: tag => tag === 'jrg-element'
}
}
})
],
Source: https://github.com/vitejs/vite/issues/1312
Vue templates (content of app div in your case) are compiled by Vue template compiler and expects all custom elements are Vue components and properly registered. In order to tell Vue that you are using some non-Vue custom element (Web Components API), you need to configure compiler.
Vue 2.x
Vue.config.ignoredElements = ['jrg-element']
Vue 3
const app = Vue.createApp({})
app.config.isCustomElement = tag => tag === 'jrg-element'
The docs
I have installed Vuetify as they recommend on their website and added it to my app.js.
require('./bootstrap');
import vuetify from './plugins/vuetify';
window.app = new Vue({
vuetify,
el: '#app',
components: {
},
data: {
},
methods: {
}
});
However i'm still getting errors when attempting to use the component's such as v-switch within the app element and also within other components.
Error:
Unknown custom element: <v-switch> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I want to include buttons in various places on a page, outside the Vue components elsewhere on the page, that trigger store actions through a click event. I have buttons within my components that do as much, connecting to methods after v-on:click that then trigger store actions through this.$store.dispatch. Is it possible to do this from outside of Vue?
To directly answer your question, you can do what you want by hanging your Vue instance directly off of the window, for instance:
<div id="app">
<p>{{ message }}</p>
</div>
window.IVue = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
store: new Vuex.Store({
actions: {
hello() {
return Promise.resolve('Hello from the store!')
}
}
})
})
window.IVue.$store.dispatch('hello').then((message) => {
Vue.set(window.IVue, 'message', message)
})
And here's a jsFiddle
You'll see the message is Hello from the store!
I'm using Vue on a Node/Webpack/Vue Router environment and trying to setup a global event handler or bus. But it's not working. It's showing up as undefined. Here's my setup:
main.js:
//Declare event handler
Object.defineProperty(Vue.prototype, '$bus', {
get () {
return this.$root.bus
}
})
//Declare app instance
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<script>
export default {
name: 'App'
created: () => {
console.log(this.$bus);
}
}
</script>
The console.log statement returns undefined, meaning the event handler somehow isn't getting passed to the app. I've also tried the following statement to declare the event handler:
main.js
//Declare event handler
const eventBus = new Vue()
Vue.prototype.$bus = eventBus
But that doesn't work either.
This is a problem with using the arrow function. While the () => {} syntax looks nicer than function() {}, there is a difference, in that the the arrow function uses a lexical context for this (from where it was defined, instead of from where it was called, which id what you need in this instance), meaning that this is no longer the Vue instance, so you cannot use this.$bus. You can fix this by replacing the arrow function with a regular function using either created: function() {... or the concise (but functionally equivalent) version created() {...
You can read up more on the differences by looking up articles on es6, arrow functions, lexical scope, this context.
main.js code:
import Vue from "vue";
import App from "./App";
Vue.prototype.$bus = new Vue();
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
somewhere in app.js
export default {
name: "App",
created() {
console.log(this.$bus);
}
};
This must be simple, but haven't cracked it...
In vue, I think I get how to pass props from parent to child components. And I understand that I have an app state in the data member of the vue instance. What I don't understand is how to get the data state into the root app as props.
It seems there are a few ways to organize a vue app, so here's what I'm trying to make work:
index.ts
import app from './app.vue'
export default new Vue({
// App Root Element
el: '#app',
render: (c) => c('app'),
components: {
app
},
data: {
someValue: 42
}
})
app.vue
<template>
<div>
Some Value: {{someValue}}
</div>
</template>
<script lang="ts">
export default {
props: ['someValue']
};
</script>
I assume it should be something like the following, but I don't know how to get a reference directly to the data - unless I keep a reference to it outside of vue for this purpose, but that seems like it should not be necessary:
render: (c) => c('app', { someValue: ??? }),
Use this to get data or property values inside your render method (or methods or computed values, etc). Don't use an arrow function to define your render function if you're going to use this inside it.
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
Example.
console.clear()
const app = {
props: ["someValue"],
template: `<div>Some Value: {{someValue}}</div>`
}
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
</div>
As #RoyJ pointed out, this is the key section of the documentation.