We Keep Coding

Is there a vue.js equivalent of ngTemplateOutlet?

Does vue.js have an equivalent of Angular's *ngTemplateOutlet directive? Let's say I have some components defined like this:
<template>
<div id="independentComponent">
Hello, {{firstName}}!
</div>
</template>
<script>
export default {
name: "independentComponent",
props: ['firstName']
}
</script>
...
<template>
<div id="someChildComponent">
<slot></slot>
<span>Let's get started.</span>
</div>
</template>
<script>
export default {
name: "someChildComponent"
}
</script>
I want to be able to do something like this:
<template>
<div id="parentComponent">
<template #indepdentInstance>
<independentComponent :firstName="firstName" />
</template>
<someChildComponent>
<template #indepdentInstance></template>
</someChildComponent>
</div>
</template>
<script>
export default {
name: "parentComponent",
components: {
someChildComponent,
independentComponent
},
data() {
return {
firstName: "Bob"
}
}
}
</script>
In Angular, I could accomplish this with
<div id="parentComponent">
<someChildComponent>
<ng-container *ngTemplateOutlet="independentInstance"></ng-container>
</someChildComponent>
<ng-template #independentInstance>
<independentComponent [firstName]="firstName"></independentComponent>
</ng-template>
</div>
But it looks like Vue requires the element to be written to the DOM exactly where it is in the template. Is there any way to reference an element inline and use that to pass to another component as a slot?

You cannot reuse templates like ngTemplateOutlet, but can combine idea of $refs, v-pre and runtime template compiling with v-runtime-template to achieve this.
First, create reusable template (<ng-template #independentInstance>):
<div ref="independentInstance" v-show="false">
<template v-pre> <!-- v-pre disable compiling content of template -->
<div> <!-- We need this div, because only one root element allowed in templates -->
<h2>Reusable template</h2>
<input type="text" v-model="testContext.readWriteVar">
<input type="text" v-model="readOnlyVar">
<progress-bar></progress-bar>
</div>
</template>
</div>
Now, you can reuse independentInstance template:
<v-runtime-template
:template="$refs.independentInstance.innerHTML"
v-if="$refs.independentInstance">
</v-runtime-template>
But keep in mind that you cannot modify readOnlyVar from inside independentInstancetemplate - vue will warn you with:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "readOnlyVar"
But you can wrap it in object and it will work:
#Component({
components: {
VRuntimeTemplate
}
})
export default class ObjectList extends Vue {
reusableContext = {
readWriteVar: '...'
};
readOnlyVar = '...';
}

You could try Portal vue written by LinusBorg a core Vue team member.
PortalVue is a set of two components that allow you to render a
component's template (or a part of it) anywhere in the document - even
outside the part controlled by your Vue App!
Sample code:
<template>
<div id="parentComponent">
<portal to="independentInstance">
<!-- This slot content will be rendered wherever the <portal-target>
with name 'independentInstance' is located. -->
<independent-component :first-name="firstName" />
</portal>
<some-child-component>
<portal-target name="independentInstance">
<!--
This component can be located anywhere in your App.
The slot content of the above portal component will be rendered here.
-->
</portal-target>
</some-child-component>
</div>
</template>
There is also a vue-simple-portal written by the same author that is smaller but that mounts the component to end of body element.

My answer from #NekitoSP gave me an idea for a solution. I have implemented the sample below. It worked for me. Perhaps you want to use it as a custom component with props.
keywords: #named #template #vue
<template>
<div class="container">
<div ref="templateRef" v-if="false">write here your template content and add v-if for hide in current place</div>
....some other contents goes here
<p v-html="getTemplate('templateRef')"></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
Vue.extend({
methods:{
getTemplate(tempRef){
return this.$refs[tempRef].innerHTML
}
}
})
</script>

X-Templates
Use an x-template. Define a script tag inside the index.html file.
The x-template then can be referenced in multiple components within the template definition as #my-template.
Run the snippet for an example.
See the Vue.js doc more information about x-templates.
Vue.component('my-firstname', {
template: '#my-template',
data() {
return {
label: 'First name'
}
}
});
Vue.component('my-lastname', {
template: '#my-template',
data() {
return {
label: 'Last name'
}
}
});
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-firstname></my-firstname>
<my-lastname></my-lastname>
</div>
<script type="text/x-template" id="my-template">
<div>
<label>{{ label }}</label>
<input />
</div>
</script>

Not really sure i understand your problem here, but i'll try to give you something that i will opt to do if i want to add two components in one template.
HeaderSection.vue
<template>
<div id="header_id" :style="'background:'+my_color">
welcome to my blog
</div>
</template>
<script>
export default {
props: ['my_color']
}
</script>
BodySection.vue
<template>
<div id="body_id">
body section here
</div>
</template>
<script>
export default {
}
</script>
home.vue
<template>
<div id="parentComponent">
<header-section :color="my_color" />
<body-section />
</div>
</template>
<script>
import HeaderSection from "./components/HeaderSection.vue"
import BodySection from "./components/BodySection.vue"
export default {
name: "home",
components: {
HeaderSection,
BodySection
},
data() {
return {
my_color: "red"
}
}
}
</script>

Output a Vue.js component - unknown custom element

I'm trying to output a Vue.js component on my page, I was following the documentation but I'm getting the following error -
[Vue warn]: Unknown custom element: <contacts> - did you register the component correctly?
This is my code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('contacts', require('./components/Contacts.vue'));
const app = new Vue({
el: '#app'
});
The component code:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Contacts list</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
My blade file:
<div class="container">
<contacts></contacts>
</div>

Apologies, I was running npm run watch so that's why the VueJS Component wasn't loading.

Access component data in other component using slots in VueJS

I am trying to build a VueJS component. I have two other components which I want to use in a parent child manner. Now, I want to pass parent's data to child. It is like this:
App.vue
<template>
<div id="app">
<parent>
<child></child>
<child></child>
<child></child>
<child></child>
</parent>
</div>
</template>
<script>
import child from './child.vue'
import parent from './parent.vue'
var vm = new Vue({
el: '#app',
components: {
parent,
child
}
})
</script>
parent.vue
<template>
<div class="container">
This is parent component
<slot>
</slot>
</div>
</template>
<script>
export default {
name: 'parent',
data () {
return {
parentMsg: {
'key1': 'value1',
'key2': 'value2'
}
}
}
}
</script>
child.vue
<template>
<div class="container">
Child component
<!-- I have to place a div here which will consume parentMsg object -->
<!-- Each instance of child component rendered should have access to parentMsg -->
<div>
<!-- Some HTML to consume the parentMsg -->
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'child',
data () {
return {
demo: 'Demo message changed'
}
}
}
</script>
I want parentMsg from parent.vue to be accessible in child.vue. I don't want to expose parentMsg on App.vue. How can I do this?
I placed the div consuming parentMsg inside (and after too) unnamed slot in parent.vue template and thought that with each instance of child.vue, a copy of div will be rendered. It does not work.

You can pass data in slot in parent.vue
<template>
<div class="container">
This is parent component
<slot :parentMsg="parentMsg"></slot>
</div>
</template>
In app.vue access parentMsg through scope and pass as props to child:
<template>
<div id="app">
<parent>
<template scope="defaultSlotScope">
<child :msg="defaultSlotScope.parentMsg"></child>
<child :msg="defaultSlotScope.parentMsg"></child>
<child :msg="defaultSlotScope.parentMsg"></child>
<child :msg="defaultSlotScope.parentMsg"></child>
</template>
</parent>
</div>
</template
>
In child.vue use msg as props:
<template>
<div class="container">
<div>
{{msg}}
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'child',
props:['msg'],
data () {
return {
demo: 'Demo message changed'
}
}
}
</script>

Why dont you put the child-component in the parent template and pass the msg from parent to them ? Slots are not intended to be used like this.
App.vue
<template>
<div id="app">
<parent>
</parent>
</div>
</template>
<script>
import parent from './parent.vue'
var vm = new Vue({
el: '#app',
components: {
parent,
child
}
})
</script>
Parent.vue
<template>
<div class="container">
This is parent component
<child :msg="key1"></child>
<child :msg="key1"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'parent',
data () {
return {
parentMsg: {
'key1': 'value1',
'key2': 'value2'
}
}
}
}
</script>
Child.vue
<template>
<div class="container">
Child component
<div>
{{msg}}
</div>
</div>
</template>
<script type="text/javascript">
export default {
name: 'child',
props: {
msg: String
},
data () {
return {
demo: 'Demo message changed'
}
}
}
</script>

How to use vue.js component in laravel blade?

I registered component in my app.js like this:
Vue.component('navbar', require('./components/Navbar.vue'));
Now I want to import that component:
<template>
<nav class="navbar">CODE HERE</nav>
</template>
Into my blade.php file:
<body class="">
<div id="app">
<div class="">
<navbar></navbar> <-- here!
#yield('content')
</div>
</div>
</body>
What's the easiest way to do this?

In app.js
import navbar from './components/Navbar.vue';
Vue.component('navbar', require('./components/Navbar.vue'));
var app = new Vue({
el: '#app',
components: {
'navbar': require('./components/Navbar.vue'),
}
});
In your blade:
<body class="">
<div id="app">
<div class="">
<navbar></navbar>
#yield('content')
</div>
</div>

It's an old thread, but: don't forget to run npm run dev to compile the app.js

Passing props to element attributes in Vue components

When I try passing props to attributes of HTML elements in .vue files, they just stop rendering. What am I doing wrong?
script.js
import hInput from './components/hInput.vue'
Vue.component('h-input', hInput);
const app = new Vue({
el: '#head',
});
index.php
<div id="head">
<h1>{{config('app.name')}}</h1>
<h-input placeholder="Hi" name="hello"></h-input>
</div>
hInput.vue
<template>
<div>
<input type="text" placeholder="{{placeholder}}">
</div>
</template>
<script>
export default {
props: ['placeholder', 'name']
};
</script>

Use the binding syntax, not text interpolation.
<template>
<div>
<input type="text" v-bind:placeholder="placeholder">
</div>
</template>
There is also a shorthand.
<template>
<div>
<input type="text" :placeholder="placeholder">
</div>
</template>