Develop Reference

How to access Vue data in Vue-CLI in browser console

I saw many answers telling to use vue-devtools to access the Vue Object but is there a way to do it in the browser console? Like in the tutorial, we enter
> app.data.sock
in console to get the data
Let's say:
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
HelloWorld.vue
<template>
<div class="hello">
<ul>
<li v-for="title in titles" :key="title.id">{{ title.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
titles: [{
id: 0,
name: "a"
},
{
id: 1,
name: "b"
}]
}
}
}
</script>
How do I access the data of 'titles' in HelloWorld.vue? In other word, how to get this.data.titles[0].name in the HelloWorld.vue in the browser console? Thank you

You can access the value of data function in created our mounted hooks of Vue lifecycle or can create a function in methods. I am calling your data in created hook
<script>
export default {
name: 'HelloWorld',
data() {
return {
titles: [{
id: 0,
name: "a"
},
{
id: 1,
name: "b"
}]
}
},
created(){
console.log(this.data.tiles)
}
}
</script>

Vue.js render multiple slots

I have the following app:
<template>
<component :is="layout">
<router-view :layout.sync="layout"/>
</component>
</template>
<script>
import LayoutBlank from './LayoutBlank'
export default {
name: 'app',
data() {
return {
layout: LayoutBlank,
};
},
}
</script>
<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
name: 'LayoutBlank',
created() {
this.$parent.$emit('update:layout', LayoutBlankTemplate);
},
render() {
return this.$slots.default[0];
},
}
</script>
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'LayoutBlankTemplate',
}
</script>
<template>
<layout-blank>
Test content
</layout-blank>
</template>
<script>
import LayoutBlank from './LayoutBlank';
export default {
name: 'BlankTest',
components: {LayoutBlank},
}
</script>
All works fine. But now I would like to add one more slot to the LayoutBlankTemplate:
<template>
<div>
<slot></slot>
<slot name="second"></slot>
</div>
</template>
<script>
export default {
name: 'LayoutBlankTemplate',
}
</script>
and use it in BlankTest:
<template>
<layout-blank>
<template #default>Test content</template>
<template #second>Second test content</template>
</layout-blank>
</template>
<script>
import LayoutBlank from './LayoutBlank';
export default {
name: 'BlankTest',
components: {LayoutBlank},
}
</script>
The code renders only the default slot content. The problem is that I'm using the return this.$slots.default[0]; in LayoutBlank component which renders only the default slot content.
I cannot find the way how to render all slots in LayoutBlank::render() method. I know that I'm able to get the slots list using this.$slots or this.$scopedSlots but I can't find the way how to pass them to the LayoutBlankTemplate to make them render.

You could put the slots into elements you create I believe. This is mentioned (briefly) in the render function documentation.
This may not be exactly the layout you want, but for example,
<script>
import LayoutBlankTemplate from './LayoutBlankTemplate'
export default {
name: 'LayoutBlank',
created() {
this.$parent.$emit('update:layout', LayoutBlankTemplate);
},
render(createElement, context) {
return createElement('div', {}, [
createElement('div', {}, this.$slots.default),
createElement('div', {}, this.$slots.second)
])
},
}
</script>

Can't add component to vue apps template - did you register the component correctly?

I've added a main vue app in my application. And I want to add a component to the app.
Trying to add TopMenu.vue to the App.vue:
<top-menu></top-menu> in App.vue.
Registered in main.js for app.
Am I using the single file components correct?
main.js
import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue({
el: '#app',
render: h => h(App),
components: {
'top-menu': TopMenu
}
})
App.vue:
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
}
};
</script>
TopMenu.vue:
<template>
<div class="user-menu drop-shadow"></div>
</template>
<script>
export default {
name: 'top-menu',
data: function () {
return "somedata";
}
}
</script>

You should import it and use it inside your App.vue :
<template>
<div class="wrapper">
<top-menu></top-menu>
<div class="container drop-shadow">
<h1>{{ message }}</h1>
<p1>{{ about }}</p1>
</div>
</div>
</template>
<script>
import TopMenu from './TopMenu'
export default {
name: "App",
data() {
return {
message: "Hello kosken!",
about: "Using Parcel In A Vue.js App"
};
},
components: {
'top-menu': TopMenu
}
};
</script>

import Vue from 'vue'
import App from './components/App'
import TopMenu from './components/TopMenu'
Vue.component('top-menu', TopMenu)
This is how you should register component globally and you can use it anywhere.

vue.js javascript file from static folder

It is the first web application I am going to make, so I am totally new to Vue.js Javascript programming. I am using one of Boostrap templates called Beagle.
http://themes.getbootstrap.com/preview/?theme_id=1696&show_new=
I have a file app-charts-morris.js which I hold in my Static folder, here is some code of this file:
var App = (function () {
'use strict';
App.chartsMorris = function( ){
//Donut Chart
function donut_chart(){
var color1 = App.color.warning;
var color2 = App.color.success;
var color3 = App.color.primary;
Morris.Donut({
element: 'donut-chart',
data: [
{label: 'Facebook', value: 33 },
{label: 'Google', value: 33 },
{label: 'Twitter', value: 33}
],
colors:[color1, color2, color3],
formatter: function (y) { return y + "%" }
});
}
donut_chart();
};
return App;
})(App || {});
What it does is it should show me Donut chart with some javascript functions, but nothing appears here only empty space.
Here is my Vue code:
<template>
<div id="donut-chart" style="height: 250px;"></div>
</template>
<script>
export default {
data () {
return {
}
},
computed: {
},
watch: {
},
methods: {
}
}
</script>
and here where I access my javascript file:
<script src="/static/js/app-charts-morris.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
//initialize the javascript
App.init()
App.chartsMorris()
App.ChartJs()
App.dashboard()
});
</script>
my main.js file
import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import * as firebase from 'firebase'
import 'firebase/firestore'
import router from './router'
import { store } from './store'
import {VueMasonryPlugin} from 'vue-masonry'
import InstantSearch from 'vue-instantsearch'
Vue.use(InstantSearch)
Vue.use(Vuetify)
Vue.use(VueMasonryPlugin)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App),
created () {
}
})
What is the problem here? Why vue.js does not show my Donut chart? But it shows without any framework

Here is my Vue code:
If it's your App.vue file, as you initialize your Vue instance on an element #app, you need to add it in your template:
<template>
<div id="app">
<div id="donut-chart" style="height: 250px;"></div>
</div>
</template>
Or change the element to donut-chart:
new Vue({
el: '#donut-chart',
router,
store,
render: h => h(App),
})
<template>
<div id="donut-chart" style="height: 250px;"></div>
</template>

Vue.js loading single-file components

I'm new to Vue.js and want to use single-file components, but I don't understand the workflow.
For example, I have three components: App, Grid and List
App.vue
<template>
<div id="app">
<div id="grid"></div>
<div id="right"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: 'Hello Vue!'
}
}
}
</script>
Grid.vue
<template>
<div id="left"></div>
</template>
<script>
export default {
name: 'grid',
data: function () {
return {
grid: 'some-data'
}
}
}
</script>
List.vue
<template>
<div id="right"></div>
</template>
<script>
export default {
name: 'list',
data: function () {
return {
text: 'some-text'
}
}
}
</script>
Main.js
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
new Vue({
el: '#app',
render: h => h(App)
});
new Vue({
el: '#grid',
render: h => h(Grid)
});
new Vue({
el: '#right',
render: h => h(PatternList)
});
It works but I hope this isn't the right way to create nested components.
Can anyone show the way it should be done? Thanks

You can register components using the Vue.component method:
import Vue from 'vue'
import App from './vue/App.vue'
import Grid from './vue/Grid.vue'
import PatternList from './vue/PatternList.vue'
Vue.component('grid', Grid);
Vue.component('pattern-list', PatternList);
new Vue({
el: '#app',
render: h => h(App)
});
And then add them to the App template directly using their tag name:
<template>
<div id="app">
<grid></grid>
<pattern-list></pattern-list>
</div>
</template>
This registers the components globally, meaning that any Vue instance can add those components to their templates without any additional setup.
You can also register components to a Vue instance, like so:
new Vue({
el: '#app',
render: h => h(App),
components: {
'grid': Grid,
'pattern-list': PatternList
}
});
Or within the script tag of a single-file component:
<script>
import Grid from './vue/Grid.vue'
export default {
name: 'app',
components: {
'grid': Grid,
'pattern-list': PatternList
}
});
</script>
This registers the components just to that Vue instance, meaning that those registered components will only be available to use within the template for that Vue instance. A child component would not have access to those registered components unless those components are also registered to the child Vue instance.