How to import Vue components from browser - via CDN - javascript

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>

Related

why the template ui did not show the vue data

I am a newbie with Vue, now I define the vue code like this:
import Vue from "vue";
export default Vue.extend({
data: () => {
message: "show message";
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<div v-text="message"></div>
</div>
</template>
why the UI did not show the Vue data message? this is my sandbox version code: https://codesandbox.io/s/loving-sea-snvfj?file=/src/App.vue:149-237
I recommend reading the documentation on Vue v2 or v3 on the official website - it is quite good.
Regarding your situation, it is better for you to familiarize yourself with these sections of the documentation
Below is an example from the official website:
var app = new Vue({
el: '#app',
data: {
message: 'show message'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ message }}
</div>

Register Vue.js component dynamically from a string

I have a CRUD that enables me to write Vue.js component's code in the textarea like:
<template>
<div><p class='name-wrapper'>{{ model.name }}</p></div>
</template>
<script>
module.exports = {
name: 'NameWrapper',
props: ['model']
}
</script>
<style lang='sass'>
.name-wrapper
color: red
</style>
Then in other component, I fetch this data and want to register it as a dynamic/async, custom component like:
<template>
<component :is='dynamicName' :model='{name: "Alex"}'></component>
</template>
<script>
import httpVueLoader from 'http-vue-loader'
import Vue from 'vue'
export default {
name: 'DynamicComponent',
props: ['dynamicName', 'componentDefinitionFromTextareaAsString'],
beforeCreate: {
// I know that as a second parameter it should be an url to the file, but I can't provide it, but I would like to pass the contents of the file instead there:
httpVueLoader.register(Vue, this.$options.propsData.componentDefinitionFromTextareaAsString)
// I was trying also:
Vue.component(this.$options.propsData.dynamicName, this.$options.propsData.componentDefinitionFromTextareaAsString)
}
}
</script>
As far as I know, httpVueLoader needs the url to the .vue file instead - is there a way to pass there the code itself of the component?
I am aware that passing and evaluating <script></script> tag contents can cause security issues, but I really need to do it that way.
I've read also about Vue.js compile function, but that works only for templates, not the code of the component (so the script tags again).
Is it even possible to achieve such functionality in Vue.js?
It should be possible to use a data: URI with http-vue-loader, like this:
const vueText = `
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
<\/script>
<style>
.hello {
background-color: #ffe;
}
</style>
`
const MyComponent = httpVueLoader('data:text/plain,' + encodeURIComponent(vueText))
new Vue({
el: '#app',
components: {
MyComponent
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader#1.4.1/src/httpVueLoader.js"></script>
<div id="app">
<my-component></my-component>
</div>
If that doesn't work for some reason (maybe because one of your target browsers doesn't support it) then you could get it working by patching httpRequest. See https://www.npmjs.com/package/http-vue-loader#httpvueloaderhttprequest-url-. The documentation focuses on patching httpRequest to use axios but you could patch it to just resolve the promise to the relevant text.

Vue JS how to access data variable in script

I am new to vue.js.
and i am using 2.5.13 version.
I'm trying to access my data variable in component file script.
But this give to me a undefined message.
Id attribute in the component returns correct value, but inside script, it would return undefined.
If I want to use that variable, what do I need to do?
Below is my app.js code
import App from './components/App.vue';
new Vue(Vue.util.extend({
router,
data : {
test : 1
},
}, App))
.$mount('#root');
And bleow is my App component code
<template>
<div id="app" :data-id="test">
</div>
</template>
<script>
console.log(this.data);
</script>
assign variable var app = new Vue({..}) to your Vue App. and access variable outside vue app by using appname.variable_name like app.message
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
console.log(app.message);
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
</div>

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

Categories