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>
Related
I'm trying to build a parent-child tree in Vue, and I want to pass the parent's DOM/element ID down to the child so that they can append to it. Here is a simple example of what I am trying to achieve as the DOM structure in the browser:
<div id="my-id">
<p>parent-comp header</p>
<div id="my-id-child">
<p id="my-id-child-content">child-comp content</p>
</div>
<p>parent-comp footer</p>
</div>
The only way I have been able to do this so far is to duplicate the id into another property propid and pass them both down the tree. This seems messy. See my sample code:
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<parent-comp id="my-id" propid="my-id"></parent-comp>
<script type="application/javascript">
Vue.component('parent-comp', {
props: {
propid: String
},
template: ` <div>
<p>parent-comp header</p><child-comp :id="propid + '-child'" :propid="propid + '-child'"></child-comp><p>parent-comp footer</p>
</div>`,
});
Vue.component('child-comp', {
props: {
propid: String
},
template: `<div>
<p :id="propid + '-content'">child-comp content</p>
</div>`,
});
new Vue({
el: '#my-id'
});
</script>
</body>
</html>
I'm guessing there must be a better way to achieve this? It seems like it should be a simple task? Thanks.
There are indeed better ways to refer to specific elements within the current component's template: use refs in the template, which would allow your component script to access them via this.$refs:
<template>
<div>
<button ref="myBtn">Click</button>
</div>
</template>
<script>
export default {
methods: {
doFoo() {
console.log(this.$refs.myBtn)
}
}
}
</script>
The scope isolation is maintained. For example, when there are multiple instances of component A on a page, and one of them gets a reference to its button (via this.$refs.myBtn) to disable it, only that instance's button is disabled. All other A instances are unaffected.
I have my input field in one div, and will have label in another div (as sidebar in my application). I want to update label in sidebar, as I type in input on first div.
I am happy to create second div a component if that's the way. I was reading online, and it was said we could use props to pass data to component. But I am not able to link input field to component. Please find my code as below:
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2'
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp></testp>
</div>
</body>
</html>
As Pointed in Comment You have no reason to have two separate Vue instance and the First Answer is correct. But in some cases where you really need to have multiple Vue instances, you can actually use them in the following manner.
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2',
computed: {
newMessage() {
return app.message;
}
},
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp :message="newMessage"></testp>
</div>
</body>
</html>
Please observe the computed value newMessage is actually getting its value form a different Vue instance (app) and it is also reactive. Therefore whenever the value in first Vue instance changes, it is updated in another Vue instance.
Codepen: https://codepen.io/ashwinbande/pen/xMgQQz
Like I have pointed out in my comments, there is no reason for you to use two separate Vue instances. What you can do is simply wrap everything within an app container, e.g. <div id="#app">, and then instantiate your VueJS instance on that element instead.
Then, you can use v-bind:message="message" on the <testp> component to pass in the message from the parent. In this sense #div1 and #div2 are used entirely for markup/decorative purposes and are not used as VueJS app containers in your code.
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp v-bind:message="message"></testp>
</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 ?
I am trying to use bootstrap color picker plugin with vue2. I read the following tutorial that shows how to do stuff like that.
Here is my component code:
<template>
<div class="input-group colorpicker-component">
<input type="text" value="#b8c7ce" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</template>
<script>
export default {
mounted: function() {
$(this.$el).colorpicker()
},
}
</script>
https://itsjavi.com/bootstrap-colorpicker/
Color picker works fine If I call it directly from javascript like this:
$('#sidebar_font_color').colorpicker()
However when I do this
<color-picker></color-picker>
I get this in console:
[Vue warn]: Error in mounted hook: "TypeError: $(...).colorpicker is
not a function"
I am not making a full SPA app just using some vue2 with my application at various points. Any idea why it cant find that function?
Here's a minimal working example. Your error message indicates that you don't have the colorpicker code loaded when mounted runs, or possibly that jQuery is not loaded before the colorpicker code is.
new Vue({
el: '#app',
components: {
colorPicker: {
template: '#cp-template',
mounted() {
$(this.$el).colorpicker()
},
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<color-picker></color-picker>
</div>
<template id="cp-template">
<div class="input-group colorpicker-component">
<input type="text" value="#b8c7ce" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</template>