Hello I have existing web app written in django and I want to add some vue js feautures.
I don't want to have all the pain with webpack, so I can stick to including vue.js as an external script like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
as sugested here:
https://v2.vuejs.org/v2/guide/installation.html#ad
Also I have on my page this html:
<div id="app">
just an app
{{ message }}
</div>
And the following inline script:
<script type="text/javascript" >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
But there is no message "Hello vue" on my page. As you can see on the printscreen
So what do I do?
I got the solution
it didn't work, cause django used the same braskets as vue.js
something like this {{variable}}
So I turned off django braskets:
like this:
{% verbatim %}
<div id="app">
just an app
{{ message }}
</div>
{% endverbatim %}
Related
When I import a component with VueJs content into another component with VueJs content I get this error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
example.blade.php is the component
<div id="appComp">
#{{ msg }}
</div>
<script>
var appComp = new Vue({
el: '#appComp',
data: {
msg : #json($msg),
}
});
</script>
app.blade.php which imports the example component
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<div id="app">
<x-example/>
#{{ text }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: #json($text),
}
});
</script>
if I move <x-example/> out <div id="app">, everything works fine, but it's not good for me.
<x-example/>
<div id="app">
#{{ text }}
</div>
What solutions can I find to use Laravel blades with VueJs source code?
Having an index.js file like this:
new Vue({
el: '#app',
components: {
'hello': Hello,
'counter': Counter,
'goodbye': GoodBye
}
});
And an index.html file like this:
<div id="app">
<Counter />
<Goodbye />
<Hello />
</div>
Only the first item inside #app is rendered.
As is, Counter shows ok. If I jump Goodbye or Hello up, they will also render perfectly.
I obviously would like all of them to render. What am I doing wrong?
HTML Does not support closing tags with />, its bahaves as the tag is not closed.
This means your structure looks like the following to the browser (check you elements with javascript disabled):
<div id="app">
<Counter>
<Goodbye>
<Hello>
</Hello>
</Goodbye>
</Counter>
</div>
This will of course not work, we need to update index.html to:
<div id="app">
<Counter></Counter>
<Goodbye></Goodbye>
<Hello></Hello>
</div>
I'm new to Vue.js and also do most work in a conventional LAMP environment.
The vue components tried so far don't seem to work linked in. Can anyone please:
Provide a sample process to install vue components in a legacy LAMP environment
Provide a simple html template showing how to load a vue component
Thanks for any tips.
Since you are in a legacy context, you probably won't use npm/webpack/babel. In this case, you'll import every package you need via <script> tags.
Process:
Look for the component you need
Check their docs for the steps needed to import them.
Usually it is a <script> tag (and a CSS <link> style) followed by some steps to configure (but not always).
In some rare cases the lib doesn't provide instructions for usage via <script>, in this case you can try using <script src="https://unkpg.com/NODE-PACKAGE-NAME"> and then see if it is possible to use it directly.
Examples:
Declaring your own <custom-comp> component and registering it globally via Vue.component.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<custom-comp v-bind:myname="name"></custom-comp>
</div>
<template id="cc">
<p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>
<script>
Vue.component('custom-comp', {
template: '#cc',
props: ['myname'],
data() {
return {
myown: 'Eve'
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js',
name: 'Alice'
}
});
</script>
Using a third-party component that gives instructions on how to use without NPM. Example bootstrap-vue. How to use? Follow their instructions for each specific component. Demo of the Card Component below.
<script src="https://unpkg.com/vue"></script>
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-card title="Card Title"
img-src="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<p class="card-text">
Some quick example text to build on the card title.
</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
<script>
new Vue({
el: '#app'
});
</script>
Finally, using a third-party component that doesn't show any specific instructon on how to use without NPM. In the demo below we see the vue2-datepicker. They don't give specific instructions on how to use via <script>, but by looking at their readme, we see their component typically exports a DatePicker variable. Use then use <script src="https://unpkg.com/vue2-datepicker"> to load the component and register it for use via Vue.component('date-picker', DatePicker.default);. The need for .default varies. For other components, Vue.component('comp-name', ComponentName); (instead of ComponentName.default) directly could work.
// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);
new Vue({
el: '#app',
data() {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>
<div id="app">
<div>
<date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
</div>
</div>
I want to replace my project's first piece of vanilla JS with vue.
I try to get the hello world example working.
It works as stated, but when I nest the element in another element (these may be the wrong terms) it does not work.
My source code:
<!-- this works -->
<div id="app">
<p>${ message }</p>
</div>
<!-- but this doesn't for some reason -->
<div class="container">
<div id="app">
Nested ${ message }
</div>
</div>
Full code example.
The class="container" is needed for bootstrap.
EDIT:
I took the generated html and edited it down to just the bare minimum to show it not working.
See the result.
Wrap the container with
<div id="app"></div>
It should work that way
this works fine, the problem in your template is that you have two elements with id="app" so vue instance is initialized with the first element with id="app", then the second (the nested one) is never initialized
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- but this doesn't for some reason -->
<div class="container">
<div id="app">
Nested ${ message }
</div>
</div>
<script>
new Vue({
delimiters:['${', '}'],
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
You have 2 #app id but one vue instance. If you need two #app you should make two Vue instance. Instance 1 for #app1 and instance 2 for #app2. You can save theme in variables if you need to interact within theme:
<div id="app1">
<p>${ message }</p>
</div>
<div class="container">
<div id="app2">
Nested ${ message }
</div>
</div>
<script>
var app1 = new Vue({
delimiters:['${', '}'],
el: '#app1',
data: {
message: 'Hello Vue.js!'
}
});
var app2 = new Vue({
delimiters:['${', '}'],
el: '#app2',
data: {
message: 'Hello Vue.js!'
}
})
</script>
if this answer helped you, consider to accept it.
I have recently started using Vue and I was looking for getting to use Vue.Draggable on my project. Due to framework and current setup in use I haven't been able to implement single-page-component .vue-files, and have instead simply written app & components with string-templates to .js -files.
I'm unable to figure out how to include draggable to my application.
Basic structure looks like follow:
#HTML
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="vuedraggable.js"></script>
<script src="component.js"></script>
<script src="app.js"></script>
--
#app.js (simply a wrapper)
var vm = new Vue({
el: '#app',
});
--
#component.js
Vue.component('mycomponent',{
template: `
<form>
<h2>{{ form.label }}</h2>
<draggable v-model="form.fields" class="dragArea">
<div v-for="field in form.fields">
<field :field="field"></field>
</div>
</draggable>
</form>
`,
data: function() {
return {
form: { ... form-structure-to-be ...}
};
},
});
With this structure I'm getting error "vue.js:440 [Vue warn]: Unknown custom lement: - did you register the component correctly?"
I haven't been able to figure out either "require" nor "import" method and assume that both require bootstrapping. Due to environment I'm working with I'm having hard time installing libraries with NPM & strapping, and I would prefer to register components manually - is this possible and how?
Could someone please give me directions ?