I have a simple index.html file. It includes the Vue JS application and has the following code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script>
const foo = {
bar: 100
};
</script>
<script src="main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Here's how the Vue JS app looks like.
main.js
import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app")
App.vue
<template>
<div>
{{ config.bar }}
</div>
</template>
<script>
export default {
props: {
config: {
type: Object,
default: () => {},
},
}
}
</script>
I simply want to pass the const foo variable into the App.vue file. I already tried to pass it as a prop to the <div id="app" :config="foo"></div>, however it did throw an undefined error in App.vue.
How can I pass a JS variable from HTML into a Vue Application and to the component?
I have a display component (app-display) with dynamic component inside (by default: app-empty):
app.component('appDisplay', {
template: `<component :is="currentComponent"></component>`,
data() {
return {currentComponent: 'appEmpty'}
}
});
I need to create new instance of app-message, to set property message for this instance and to set the instance as current component for app-display on button click.
This is a browser code for the question:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue component reference</title>
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div id="app"></div>
<script>
// main application with button & display panel
const app = self.Vue.createApp({
template: `
<app-btn></app-btn>
<app-display></app-display>
`
});
// button component to fire action
app.component('appBtn', {
template: `
<button v-on:click="setDisplay">Display message</button>`,
methods: {
setDisplay() {
console.log('I need to set "appMessage" (with some "message" param) as inner component to "app-display" here.');
}
}
});
// component with dynamic component inside
app.component('appDisplay', {
template: `<component :is="currentComponent"></component>`,
data() {
return {currentComponent: 'appEmpty'}
}
});
// default component to display
app.component('appEmpty', {
template: `<div>I'm empty.</div>`
});
// this component with custom message should be displayed on button click
app.component('appMessage', {
template: `
<div>{{ message }}</div>
`,
props: {
message: String
}
});
// mount main app to the page
app.mount('#app');
</script>
</body>
</html>
How can I access app-display from app-btn?
You should emit an event from button component to main component with component name to display and the message and in the main component you should define a message and current component name which will be updated by the handler of the emitted event and passed as props to the component that displays them:
// main application with button & display panel
const app = self.Vue.createApp({
template: `
<app-btn #change-content="changeContent"></app-btn>
<app-display :currentComponent="componentName" :message="msg"></app-display>
`,
data(){
return{
componentName:'appEmpty',
msg:''
}
},
methods:{
changeContent(compName,msg){
console.log(compName,msg)
this.componentName=compName
this.msg=msg
}
}
});
// button component to fire action
app.component('appBtn', {
template: `
<button v-on:click="setDisplay">Display message</button>`,
methods: {
setDisplay() {
this.$emit('change-content','appMessage','Hello message :)')
}
}
});
// component with dynamic component inside
app.component('appDisplay', {
props:{
currentComponent:{
type:String,
default:'appEmpty'
}
},
template: `<component :is="currentComponent"></component>`,
});
// default component to display
app.component('appEmpty', {
template: `<div>I'm empty.</div>`
});
// this component with custom message should be displayed on button click
app.component('appMessage', {
template: `
<div>{{ message }}</div>
`,
props: {
message: String
}
});
// mount main app to the page
app.mount('#app');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue component reference</title>
<script src="https://unpkg.com/vue#next"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
I am learning Vue and messing around with examples in their guide. I am trying to register a sub-component locally inside a root vue component as described here. But it does not appear on my page. What am I missing ? app.components also returns undefined.
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working</div>`,
components: {
'component-x': componentX
}
})
console.log(app.components);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="vue-div">
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="./js/test.js"></script>
</body>
</html>
The issue is, your main Vue has a template - this replaces any HTML inside the target element
So, you can either add the component-x inside the new Vue constructor template:
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working<component-x></component-x></div>`,
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div"></div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="./js/test.js"></script>
Or you can remove the template: from the new Vie constructor and the existing content of the target element will be used
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div">
Vue is working
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
I want to send a signal from a child component to a parent. I don't want to use Vuex as for my level of VueJS knowledge Vuex is too complicated. I am using single file components.
child.vue
<script>
export default {
name: 'ChildComponent',
methods: {
// ajax post here ...
if (response.data.status === 'accepted'){
this.$emit('send-data', 'accepted')
}
}
parent.vue
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'Parent',
data () {
return {
stage: 1
}
},
components: {
ChildComponent
},
// how can I replace 'events' with $on in a single file component and listen for events after all components have been created
events: {
'send-data': function (dataResponse) {
if (dataResponse === 'accepted'){
this.stage = 2
}
}
}
examples in the VueJS docs show something like this for the parent:
var eventHub = new Vue()
created: function () {
eventHub.$on('add-todo', this.addTodo)
eventHub.$on('delete-todo', this.deleteTodo)
},
but I want to listen to events at any time, not just on creation. How can I replace the parents 'events' with a $on function?
If you start listening for event on created that would work for the entire life cycle of the component. Alternatively you could set event to trigger using v-on or # shortcut while using the component.
Example
Vue.component('my-component', {
template: '<div><button v-on:click="sendHello">hello</button></div>',
methods:{
sendHello: function(){
console.log('hello');
this.$emit('hello','hello')
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods:{
sayHi: function(){
console.log('say hi')
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>VueJs</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<my-component v-on:hello='sayHi'></my-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
The below is what I tried:
index.html
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
app.js
define([
'jquery', 'vue'
], function ($, Vue) {
var vm = new Vue({
el: 'html',
data: {
hello: 'Hello world'
}
});
});
But the title seemed not bounded, how to make it work?
There are essentially two ways to solve it.
Use an existing Package
For example, vue-meta:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
metaInfo: {
// if no subcomponents specify a metaInfo.title, this title will be used
title: 'Default Title',
// all titles will be injected into this template
titleTemplate: '%s | My Awesome Webapp'
}
}
</script>
Create your own Component
Create a vue file containing:
<script>
export default {
name: 'vue-title',
props: ['title'],
watch: {
title: {
immediate: true,
handler() {
document.title = this.title;
}
}
},
render () {
},
}
</script>
Register the component using
import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);
Then you can use it in your templates, e.g.
<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>
You can do it with 1 line in the App.vue file, like this:
<script>
export default {
name: 'app',
created () {
document.title = "Look Ma!";
}
}
</script>
Or change the <title> tag content in public/index.html
<!DOCTYPE html>
<html>
<head>
<title>Look Ma!</title> <!- ------ Here ->
</head>
...
This answer is for vue 1.x
using requirejs.
define([
'https://cdn.jsdelivr.net/vue/latest/vue.js'
], function(Vue) {
var vm = new Vue({
el: 'html',
data: {
hello: 'Hello world'
}
});
});
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>
you can do it like this using the ready function to set the initial value and watch to update when the data changes.
<html>
<head>
<title>Replace Me</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: '#app',
ready: function () {
document.title = this.title
},
data: {
title: 'My Title'
},
watch: {
title: function (val, old) {
document.title = val
}
}
})
</script>
</body>
</html>
also i tried this based on your original code and it works
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<input v-model="title">
</div>
<script>
new Vue({
el: 'html',
data: {
title: 'My Title'
}
})
</script>
</body>
</html>
Just to chime in here. I have read that VueJS wants nothing to do with the meta stuff so I would do such things outside of the "VueJS" realm.
Basically make a plain vanilla js service like below. Here you could add all the functions to handle the meta data stuff such as the Open Graph data.
meta.js
export setTitle(title) {
document.title = title
}
Now we can import the service in main and then provide it to any component in the app who wants it. I could even use my meta service in other projects too which use different frameworks like React or Angular. Portability is super cool!
main.js
import meta from './meta'
new Vue({
router,
render: h => h(App),
provide: {
meta: meta
}
}).$mount('#app')
Here the component injects the meta service it wants to use.
someView.vue
export default {
name: 'someView',
inject: ['meta'],
data: function() {
returns {
title: 'Cool title'
}
},
created: function() {
this.meta.setTitle(this.title);
}
}
This way the meta service is decoupled from the app because different parent components can provide different versions of the meta service. Now you can implement various strategies to see which one is right for you or even different strategies per component.
Basically the inject walks up the component hierarchy and takes the meta service from the first parent who provides it. As long as the meta service follows a proper interface, you're golden.
Decoupling with DI is super cool 😃
Title and meta tags can be edited and updated asynchronously.
You can use state management, create a store for SEO using vuex and update each part accordingly.
Or you can update the element by yourself easily
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector('meta[name=description]').content = data.description
})
}
If you are using Vuex and want <title> to be part of your application state, then:
create a pageTitle state variable in Vuex
map the state to the template using mapState()
watch it in template, probably add immediate: true to trigger the watcher right away
in watcher, document.title = pageTitle
This will allow you to manage title with Vuex and keep them in sync. I found it useful for SPAs.
By doing this you don't have to mess with your original HTML template, as most of the time Vue root template resides inside <body>.
This is for Vue 2.x.
router.beforeEach((to, from, next) => {
let mohican = to.path; if (mohican == '/') mohican = 'Home'
document.title = mohican.replace('/','');
next();
return;
});
I have an application toolbar component which is common for all pages of my SPA website and is nested in App.vue. In every page I update my common toolbar title in the created hook of the page using Vuex store:
//in every page.vue
created() {
this.$store.commit('toolBar', { pageTitle: this.pageTitle, ... })
},
To automatically update the website title (along with the toolbar title) I use this mutation in the store:
//store.js
toolBar(state,val){
document.title = val.pageTitle
state.toolBar = val
},
Similarly, I use the same mechanism to update e.g. SEO metadata
just pass
:title="data.name"