From the course: Vue.js 2 for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Installing Vue on an existing site

Installing Vue on an existing site - Vue.js Tutorial

From the course: Vue.js 2 for Web Designers

Start my 1-month free trial

Installing Vue on an existing site

- [Instructor] In this video we're going to install Vue on an existing site and create our first instance. Here's a product page from H+ Sports, one of the fictitious brands we use in courses. This page features some sneakers and we're going to use Vue to build a simple interactive customizer where you can choose size and color and see the product image change. This is the mockup, let's look at the actual starting point, which is index.html. Here it is with all the stuff stripped out. So what we need to do first is get Vue running on this page and just make sure that it works. Over here in my code editor, I'm going to put the Vue script tag at the bottom of the page. So we're going to use command, down arrow, to jump all the way down to the bottom where all the script tags should go. Then we're going to use the scripts-snoppet.html file that I've included with the exercise files to save us a little effort. Going to select everything that's in here, with command-A, and I'll copy, and…

Contents