We Keep Coding

Data from Blade File not rendering in Vue Component

I am working in Laravel Blade and trying to convert some blade files to vue components. I have a property in my blade file of pagetitle. I am trying to get the dynamically created page title to render on the screen from my vue component and not blade. But in my vue console, data comes back as "". Not sure why the data is carrying over.
Header.vue
<template>
<div>
<p title="page-title">{{pageTitle}}</p>
</div>
</template>
<script>
export default {
props: {
pageTitle: {
type: String
}
}
}
</script>
app.js
window.Vue = require('vue');
import Header from './components/Header';
Vue.component('header', Header);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<header :page-title="{{$pageTitle}}"></header>
</div>
header.blade.php //where page title is being pulled from
<title>
{{ $pageTitle ?? 'Default Page Title' }}
</title>

In your Header.vue file you are defining pageTitle as a data property, while it should be defined as a prop, since you are actually providing it as a property on the header component.
props: {
pageTitle: {
type: String
}
}

There already exists an HTML element called header, I suggest you rename your component. Your component is missing a props attribute to take input from blade:
Pagetitle.vue:
<template>
<div>
<p title="page-title">{{ this.pageTitle}}</p>
</div>
</template>
<script>
export default {
props: ['title'],
data() {
return {
pageTitle: '',
};
},
created() {
this.pageTitle = this.title
}
}
</script>
We created a title property. When the component is created, we set the component's pageTitle to the title given in main.blade.php.
app.js
window.Vue = require('vue');
import Pagetitle from './components/Pagetitle';
Vue.component('pagetitle', Pagetitle);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<pagetitle :title="foo bar"></pagetitle>
</div>
https://v2.vuejs.org/v2/guide/components-props.html

How to import Vue components from browser - via CDN

I'm trying to import a Vue.js component (#chenfengyuan/vue-qrcode) using UNPKG as CDN.
Currently, my setup works like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
<script type="module" src="/client.js"></script>
In my client.js file I have my Vue instance:
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The setup that I would like to achieve is something like this:
<script type="module" src="/client.js"></script>
Then my client.js would look something like this:
import Vue from 'https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.esm.browser.js'
import VueQrcode from 'https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js'
Vue.component(VueQrcode.name, VueQrcode);
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The Vue template (incrustated in HTML) is the following:
<div id="app">
<h1>{{ msg }}</h1>
<qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>
But sadly, this approach does not work. All I see in the console is that the custom tag is not recognized. With this approach, I want to achieve full separation of my Vue code from the HTML.
Any hints why it's not working as I want? What do you think?

The example you posted works fine, here is a working example.
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
<div id="app">
<h1>{{ msg }}</h1>
<qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>

Modifying the VueJS merge strategy to prioritize templates from a mixin

I have a simple Vue component and a mixin that I am bringing into that component. Both the component and the mixin have a template defined. When the mixin is merged into the component, the template defined at the component level is what is rendered to the document.
Is there any way to prioritize the template from the mixin over the one defined in the component? I would want this to be the setting throughout my application.
Simple code example of what I'm executing here:
HTML
<div id="component-test">
<basic-component></basic-component>
</div>
<script type="text/x-template" id="hello">
<div>
<h2>{{ message }}</h2>
</div>
</script>
<script type="text/x-template" id="welcome">
<div>
<h2>{{ message }}</h2>
<hr />
<p>{{ subMessage }}</h2>
</div>
</script>
JS
const Modify = {
data() {
return {
subMessage: "Welcome to Vue."
}
},
template: '#welcome'
}
const Basic = {
data() {
return {
message: "Hello World!"
}
},
template: '#hello',
mixins: [Modify]
}
new Vue({
el: '#component-test',
components: {
'basic-component': Basic
}
})

Vue.js 2 component not displaying data

I'm trying to make a simple vue component work:
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>A custom component! {{ xstr }} aa</div>',
data: function() {
return {
xstr: 'i really want this to be visible',
};
}
});
window.app = new Vue({
el: '#app',
});
</script>
But apparently xstr is not displayed. What am I missing?

I identified my issue, but it's not related to vue. I used jinja2 for generating the html, and since jinja uses the {{ }} syntax for templating as well, the two systems interfered.

How to compile Vuejs single file component?

I am using Vuejs 2 (webpack-simple template) and I would like to know how can I compile template before render it. Below my code :
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
const res = Vue.compile(App)
const vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
And these is the error that I've got when I start the server: __WEBPACK_IMPORTED_MODULE_0_vue___default.a.compile is not a function
I also tried this plugin vue-template-compiler with no luck. Can you please help me to make it work ? Thanks in advance.

You will need this setting in webpack's config:
resolve: {
alias: {
'vue$': 'vue/dist/vue'
}
}
despite on this problem: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build