Using vue.js in existing websites, the easy way.

disjfa
3 min readJan 19, 2017

--

Lets say you have a website, a blog, a corporate website. But you want to expand to new horizons. But alas, you cannot rewrite the entire website in a day. But you want to skip the hassle of just figuring out how to dynamically fix and use a jQuery component. Just start, i say!

Lets add a line of code:

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

Done. Vue.js added to your website. Lets go.

Just create cool things on the internet

I started by using a bootstrap example and went from there, i wanted to add a simple to list because we use todo as as an example as per default. After we load vue we initialized a todo component using vue.js.

Vue.component('todo-component', {
template: '#todo-component',
data: function () {
return {
items: [
{
id: 'item-1',
title: 'Checkout vue',
completed: false
}, {
id: 'item-2',
title: 'Use this stuff!!',
completed: false
}
],
newItem: ''

};
},
methods: {
addItem: function () {
if (this.newItem) {
var item = {
id: Math.random(0, 10000),
title: this.newItem,
completed: false
};

this.items.push(item);
this.newItem = '';
}
}
}
});

So we created a <todo-example> component we can use in the website. The template we reference is a ‘#todo-component’ wich uses a template. Will come back to that. The rest is just simple, some items initialized in the data and a newItem to be used in the addItem methods.

Next, initialize vue.

var app = new Vue({
el: '#vue-app'
});

Again, connected to an id item if you know html. #vue-app. So the vue app has to live on the web page, so we add this to a main element we want to use or impletent all our functions:

<div class="container" id="vue-app"></div>

Bam! Just initialize the vue.js instance on a main part of your html. All the html in there will be watch by our vue.js application.

Wait! You were talking about a template id and using this;

<script type="x-template" id="todo-component">
<div>
<h3>Example todo component</h3>
<div v-for="item in items" class="form-group" :class="{'has-success': item.completed}">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" v-model="item.completed">
</div>
<input type="text" v-model="item.title" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" v-model="newItem" class="form-control">
<div class="input-group-btn">
<button class="btn" :class="{'btn-primary': newItem}" @click="addItem()">add!</button>
</div>
</div>
</div>
</div>
</script>

Outside of the vue container we declared an instance of a template in a <script type="x-template" id="todo-component">tag. Note the id, we used that on in the component.

All together, i made a codepen exaple for those who just want to see action:

Summing this up, use a basic html page. Add vue.js. Get a way to create a cool website.

Let’s think this through, just an example. Wordpress is used by lots of websites today. The rest api is now to use. Initialize and link the categories through vue using vue-resource and show them in a widget and let users read and filter through the list and link to the category page. This is just an example t thought of using this. The rest is for you, just create and make the internet cool.

Just create cool things on the internet.

--

--

disjfa
disjfa

Written by disjfa

Creating awesome things on the internet

Responses (4)