Vue.js

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

COURSES 2

WATCH Greg Thoman's COURSE

Develop Basic Web Apps with Vue.js

Develop Basic Web Apps with Vue.js

Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only...

11 lessons

WATCH John Lindquist's COURSE

Build a Server Rendered Vue.js App with Nuxt and Vuex

Build a Server Rendered Vue.js App with Nuxt and Vuex

Vue.js has a first-class ecosystem to help construct Vue.js apps. This includes Nuxt.js which enables server-rendered applicati...

14 lessons

Make a request to an API with Axios in Vue

Let's see how to use the vue-axios NPM package to make a request to an API, and make use of the data returned.

Rory Smith
2:05

Render lists of data in Vue with v-for

Let's write some example data and render it to our page with v-for, and then see how we can use the same directive to render the same component multiple times.

Rory Smith
1:40

Load Data from URL Params in Vue.js and Nuxt.js

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

John Lindquist
3:18

Configure Named Routes in Vue.js and Nuxt.js

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple ...

John Lindquist
1:02

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components wi...

John Lindquist
1:08

Use Scoped CSS in Vue

Let's see how to apply both scoped and global styles to components in our project, and why we need to use the scoped attribute.

Rory Smith
2:09

Get Started with Vue Components

Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component.

Rory Smith
1:17

Get up and running with vue-router

How do we set up a simple app with its own routes with their own components in Vue?

Rory Smith
3:14

Use basic event handling in Vue

Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

Rory Smith
2:18

Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page o...

John Lindquist
2:23

Create Vue.js Layout and Navigation with Nuxt.js

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own app.vue layout in a layouts directory. Then you simply surround your content (the ...

John Lindquist
1:40

Build Vue.js Apps with the Vue-CLI and Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'l...

John Lindquist
2:48

Browse all Vue.js lessons.

showing All 37 lessons...

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

P

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

P

Update State with Vuex Actions in Nuxt.js

P

Display Vuex Data Differently in Each Page of Nuxt and Vue.js

P

Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

P

Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

P

Understand the Flash of Unstyled Content in Nuxt

P

Load Data from APIs with Nuxt and Vuex

P

Add CSS Libraries to Nuxt

P

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

P

Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

P

Manage Vue.js State with Vuex and Nuxt

P

Update Vuex State with Mutations and MapMutations in Vue.js

P

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

P

Make a request to an API with Axios in Vue

Render lists of data in Vue with v-for

Load Data from URL Params in Vue.js and Nuxt.js

Configure Named Routes in Vue.js and Nuxt.js

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Use Scoped CSS in Vue

Get Started with Vue Components

Get up and running with vue-router

Use basic event handling in Vue

Create Filters in Vue.js

Dynamic Vue.js Components with the component element

Build Reusable Vue.js Components

Bind Values to Input Fields in Vue.js

Handle DOM Events in Vue.js with v-on

Conditionally Render DOM Elements in Vue.js

Update Attributes, Classes and Styles in Vue.js with v-bind

Use Vue.js Watchers to Respond to Async Updates

Use Vue.js Component Computed Properties

Preload Data using Promises with Vue.js and Nuxt.js

Create Vue.js Layout and Navigation with Nuxt.js

Build Vue.js Apps with the Vue-CLI and Nuxt.js

Create a List Component in Vue.js

Create a Basic Component using Vue.js

vue tutorial about Build a Navigation Component in Vue.js and Use in a Nuxt Layout

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

4:08 vue PRO

You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.

vue tutorial about Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

2:56 vue PRO

Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link and isClient to navigate and avoid reloading data.

vue tutorial about Update State with Vuex Actions in Nuxt.js

Update State with Vuex Actions in Nuxt.js

2:34 vue PRO

You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.

vue tutorial about Display Vuex Data Differently in Each Page of Nuxt and Vue.js

Display Vuex Data Differently in Each Page of Nuxt and Vue.js

2:55 vue PRO

You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case.

vue tutorial about Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

3:41 vue PRO

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the response comes back.

vue tutorial about Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

5:25 vue PRO

The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submit.prevent syntax to avoid that behavior. Then wire together the @submit event with an add Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.

vue tutorial about Understand the Flash of Unstyled Content in Nuxt

Understand the Flash of Unstyled Content in Nuxt

0:52 vue PRO

You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use nuxt build, your styles will render before the page loads.

vue tutorial about Load Data from APIs with Nuxt and Vuex

Load Data from APIs with Nuxt and Vuex

2:16 vue PRO

Before each page loads, Nuxt supports pre-fetching data to render what you need on the server. This lesson walks you through using Nuxt's fetch to load data then save it in the Vuex store.

vue tutorial about Add CSS Libraries to Nuxt

Add CSS Libraries to Nuxt

1:25 vue PRO

You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them to the nuxt.config.js so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your nuxt.config.js.

vue tutorial about Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

3:50 vue PRO

In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.

vue tutorial about Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

1:33 vue PRO

You add array of todos to the store simply by adding them to the state defined in your store/index.js file. You can access the array of todos using mapState then loop through and display them with v-for. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.

vue tutorial about Manage Vue.js State with Vuex and Nuxt

Manage Vue.js State with Vuex and Nuxt

2:03 vue PRO

Most applications require state to be shared across the application. In the case of Nuxt, you'll share state across pages. Nuxt integrates easily with Vuex by simply adding JavaScript files in the store directory. This lesson walks you through setting up a basic store and using it in your template

vue tutorial about Update Vuex State with Mutations and MapMutations in Vue.js

Update Vuex State with Mutations and MapMutations in Vue.js

1:49 vue PRO

You commit changes to state in Vuex using defined mutations. You can easily access these state mutations in your template using mapMutations. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.

vue tutorial about Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

2:21 vue PRO

The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.

vue tutorial about Make a request to an API with Axios in Vue

Make a request to an API with Axios in Vue

2:05 vue

Let's see how to use the vue-axios NPM package to make a request to an API, and make use of the data returned.

vue tutorial about Render lists of data in Vue with v-for

Render lists of data in Vue with v-for

1:40 vue

Let's write some example data and render it to our page with v-for, and then see how we can use the same directive to render the same component multiple times.

vue tutorial about Load Data from URL Params in Vue.js and Nuxt.js

Load Data from URL Params in Vue.js and Nuxt.js

3:18 vue

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

vue tutorial about Configure Named Routes in Vue.js and Nuxt.js

Configure Named Routes in Vue.js and Nuxt.js

1:02 vue

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the nuxt.config.js and the passing the named route to a router-link.

vue tutorial about Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

1:08 vue

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

vue tutorial about Use Scoped CSS in Vue

Use Scoped CSS in Vue

2:09 vue

Let's see how to apply both scoped and global styles to components in our project, and why we need to use the scoped attribute.

vue tutorial about Get Started with Vue Components

Get Started with Vue Components

1:17 vue

Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component.

vue tutorial about Get up and running with vue-router

Get up and running with vue-router

3:14 vue

How do we set up a simple app with its own routes with their own components in Vue?

vue tutorial about Use basic event handling in Vue

Use basic event handling in Vue

2:18 vue

Let's use a range of events and their modifiers to look at the cool ways we can deal with event handlers in Vue.

vue tutorial about Create Filters in Vue.js

Create Filters in Vue.js

1:45 vue

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

vue tutorial about Dynamic Vue.js Components with the component element

Dynamic Vue.js Components with the component element

1:40 vue

You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

vue tutorial about Build Reusable Vue.js Components

Build Reusable Vue.js Components

2:12 vue

By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it must be from parent to child using props. To communicate with the parent element, use the $emit method.

vue tutorial about Bind Values to Input Fields in Vue.js

Bind Values to Input Fields in Vue.js

1:47 vue

Use v-model to create 2-way data binding. You can render dynamic options in a select element and bind them to their data. Use v-bind on inputs to use dynamic properties on the Vue instance. Adding modifiers like .lazy, .number and .trim allow us to trim our methods and let Vue take care of things like trimming white space.

vue tutorial about Handle DOM Events in Vue.js with v-on

Handle DOM Events in Vue.js with v-on

1:06 vue

v-on can be used to handle interaction with elements in your template. Modifiers like stop and prevent can be used in place to preventDefault() and stopPropagation. Vue.js can also capture key bindings such as v-on:keyup.enter and v-on:keyup.13.

vue tutorial about Conditionally Render DOM Elements in Vue.js

Conditionally Render DOM Elements in Vue.js

1:01 vue

You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show can be used to render the content, but hide it with css. v-if can also be used on an invisible wrapper <template> element.

vue tutorial about Update Attributes, Classes and Styles in Vue.js with v-bind

Update Attributes, Classes and Styles in Vue.js with v-bind

1:17 vue

Use v-bind:class and v-bind:style to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using v-bind:style.

vue tutorial about Use Vue.js Watchers to Respond to Async Updates

Use Vue.js Watchers to Respond to Async Updates

0:40 vue

Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.

vue tutorial about Use Vue.js Component Computed Properties

Use Vue.js Component Computed Properties

1:12 vue

You can add computed properties to a component to calculate a property on the fly. The benefit of this over invoking a method is that computed properties are cached based on their dependencies.

vue tutorial about Preload Data using Promises with Vue.js and Nuxt.js

Preload Data using Promises with Vue.js and Nuxt.js

2:23 vue

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

vue tutorial about Create Vue.js Layout and Navigation with Nuxt.js

Create Vue.js Layout and Navigation with Nuxt.js

1:40 vue

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own app.vue layout in a layouts directory. Then you simply surround your content (the <nuxt> instance) with your navigation and/or layout and you're ready to go.

vue tutorial about Build Vue.js Apps with the Vue-CLI and Nuxt.js

Build Vue.js Apps with the Vue-CLI and Nuxt.js

2:48 vue

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

vue tutorial about Create a List Component in Vue.js

Create a List Component in Vue.js

2:18 vue

In this lesson, we will learn how to iterate over an array in a Vue.js template using the v-for property. We can add to and remove from that list using v-on:click and v-on:keypress.enter.

vue tutorial about Create a Basic Component using Vue.js

Create a Basic Component using Vue.js

1:04 vue

Vue.js is a "progressive framework for building user interfaces." The core of Vue is focused on the view layer only. It's easy to get started and quick to set up.

In this lesson, we will create a basic Vue component using the new Vue() method and add data properties to show dynamic content in window.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?