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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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