"Building Social Features in Ruby on Rails" was retired on September 16, 2016. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Vue.js Basics

Well done!

You have completed Vue.js Basics!

Sign up for Treehouse Back to Library

Add Vue to a Project

2:17 with Treasure Porth

Learn the different ways you can add and use Vue.js in a coding project.

You can download the project files for each stage of the course from the Downloads tab!

Text Editors

Vue.js Documentation

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    The first thing we'll need to do is add VUE to our project. 0:00
    To follow along with me, download the project files from the link on this page 0:03
    and open them in your preferred text editor. 0:07
    I'm going to use Visual Studio code, but Atom is another free and popular choice. 0:09
    I've included links to both in the teacher's notes. 0:14
    Let's start by googling vuejs docs to find the Vue.js documentation. 0:17
    You can also go directly to vuejs.org. 0:23
    Your search may look a little different, but 0:27
    one of the first hits should be the documentation. 0:29
    Click the link. 0:31
    Make sure on the left side that you're looking at the guide for 0:33
    the most recent version of Vue. 0:36
    For this course, I'll be using Version 2. 0:39
    In the left menu, I'll choose Installation to view the installation instructions. 0:41
    Especially when you're newer to programming, 0:47
    docs can often seem jargony and inaccessible. 0:49
    Vue's docs, however, are pretty awesome and easy to read. 0:52
    Using docs becomes easier with time and 0:56
    practice, it's pretty much a skill in itself. 0:58
    So I encourage you to refer to them frequently. 1:00
    As you can see, there are a few different ways to introduce Vue to a project. 1:03
    One fairly straightforward way is to download the Vue file and 1:07
    include it with your scripts as you would any other JavaScript file. 1:10
    For larger-scale apps that require more complex scaffolding, 1:13
    Vue has a CLI, or command line interface. 1:18
    This basically means you can run a command from the command line and the files and 1:22
    folders you need are automatically created for you. 1:25
    Right now, we'll use perhaps the fastest and easiest way to get up and 1:28
    running with Vue, a CDN, or content delivery network. 1:31
    This means that the Vue file is hosted by a third-party service, 1:35
    which we can link to in our project using the provided URL. 1:39
    At the bottom of the index.html in the project files, I've already included 1:43
    a link to the version of Vue that we'll use in this course. 1:47
    Future versions of Vue might introduce breaking changes, so if you plan to code 1:51
    along with me, it's important to use the same version of Vue that I'm using. 1:55
    Beneath the CDN link, let's link up to this app.js file 2:00
    And that's it, we're ready to use Vue in our project. 2:13

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up