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 6

WATCH John Lindquist's COURSE

Create a News App with Vue.js and Nuxt

Create a News App with Vue.js and Nuxt

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to c...

14 lessons

WATCH Alex Jover Morales's COURSE

Vue.js State Management with Vuex and TypeScript

Vue.js State Management with Vuex and TypeScript

In Use TypeScript to Develop Vue.js Web Applications we’ve seen how TypeScript Vue apps development by creating class based com...

13 lessons

WATCH Alex Jover Morales's COURSE

Use TypeScript to Develop Vue.js Web Applications

Use TypeScript to Develop Vue.js Web Applications

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script fe...

11 lessons

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

WATCH John Lindquist's COURSE

Advanced Fine Grained Control of Vue.js Components

Advanced Fine Grained Control of Vue.js Components

Vue is known for being super easy to pick up and quickly building great applications using the built-in template bindings and d...

13 lessons

Load components when needed with Vue async components

In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

Alex Jover Morales
2:47

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

Browse all Vue.js lessons.

showing All 70 lessons...

Build a Recursive Component for Nested Comments in Vue.js and Nuxt

P

Style a List and List Items in Vue.js and Nuxt

P

Display Only Available Data in Vue.js and Nuxt

P

Display a User Data Page Based on id in Vue.js and Nuxt

P

Create a Vuex Store for Global Data in Nuxt

P

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

P

Create CSS Transition Effects in Vue.js and Nuxt

P

Load Data into the Vuex Store in Nuxt

P

Register Vue.js Filters as Plugins in Nuxt

P

Build Global Navigation with Layouts and nuxt-link in Nuxt

P

Style Navigation Based on Route in Nuxt

P

Add a CSS Library from npm to Nuxt

Add JavaScript Libraries from npm to Nuxt

P

Start a Nuxt Project with npx and the Vue.js CLI

Split Vuex Store into Modules using TypeScript

P

Handle Forms Connected to a Vuex Store using TypeScript

P

Perform Async Updates using Vuex Actions with TypeScript

P

Modify State by using Vuex Mutations with TypeScript

P

Access State by using Vuex getter functions with TypeScript

Create a Vuex Store using TypeScript

Create your own Decorators in Vue with TypeScript

P

Use AOP in Vue Components with TypeScript and Kaop-ts

P

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

P

Create Type-Safe Vue Directives in TypeScript

P

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

P

Extend Vue Components in TypeScript

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

P

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

P

Use Properties in Vue Components Using @Prop Decorator with TypeScript

P

Write a Vue Component as a Class in TypeScript

Use Vue Router in TypeScript

P

Use Vue Tools to Navigate Across the Vuex State

P

Load components when needed with Vue async components

P

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

P

Render lists of data in Vue with v-for

P

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

P
vue tutorial about Build a Recursive Component for Nested Comments in Vue.js and Nuxt

Build a Recursive Component for Nested Comments in Vue.js and Nuxt

3:54 vue PRO

Comments can have sub-comments which can have even more deeply nested comments. This lesson walks you through the process of loading data recursively by creating a Comment component which can load itself.

vue tutorial about Style a List and List Items in Vue.js and Nuxt

Style a List and List Items in Vue.js and Nuxt

4:09 vue PRO

Every list needs a bit of styling to help the user know which items are visually important. This lesson walks through using styles isolated to a specific component to improve the look of the list.

vue tutorial about Display Only Available Data in Vue.js and Nuxt

Display Only Available Data in Vue.js and Nuxt

2:02 vue PRO

You often need to hide elements based on various conditions of your data. This lesson walks you through hiding the comments when no comments are available.

vue tutorial about Display a User Data Page Based on id in Vue.js and Nuxt

Display a User Data Page Based on id in Vue.js and Nuxt

3:02 vue PRO

Displaying data for a user who made a post or comment is a common scenario in app development. This lesson walks you through using user ids and setting up pages for the user to display the relevant information.

vue tutorial about Create a Vuex Store for Global Data in Nuxt

Create a Vuex Store for Global Data in Nuxt

3:22 vue PRO

Every application requires data. Nuxt follows the patterns set forth in Vue.js by including Vuex by default. You only need to follow a simple convention to set up Vuex to help your store and access global data in your app. This lesson walks you through setting up the store directory and exposing data to be displayed in your pages.

vue tutorial about Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

4:12 vue PRO

A common pattern in apps is to use the data from the url to modify which data is loaded. This lesson walks your through accessing and passing information from the router into your http request so that the appropriate data loads depending on which page you open.

vue tutorial about Create CSS Transition Effects in Vue.js and Nuxt

Create CSS Transition Effects in Vue.js and Nuxt

1:44 vue PRO

Adding a little flair to page transitions can help with the visual appeal of the app. This lesson walks you through using CSS transitions between pages to add a nice fade-in and fade-out page transition effect.

vue tutorial about Load Data into the Vuex Store in Nuxt

Load Data into the Vuex Store in Nuxt

2:45 vue PRO

With axios installed, you can load data and store it into your Vuex store on the server-side before your app even renders. This lesson walks you through using axios to load data in a Nuxt news app and adding it to the store to display on any page.

vue tutorial about Register Vue.js Filters as Plugins in Nuxt

Register Vue.js Filters as Plugins in Nuxt

1:50 vue PRO

Vue.js filters need to run before your app starts. In Nuxt, you do this by adding the filter as a plugin then registering it with your nuxt.config.js. This lesson walks you through create a date filter to better visually format the time.

vue tutorial about Build Global Navigation with Layouts and nuxt-link in Nuxt

Build Global Navigation with Layouts and nuxt-link in Nuxt

1:38 vue PRO

nuxt-link’s are used to build out clickable navigation in your application. This lesson walks through building a global navigation that you reuse across pages which allows the user to quickly navigate the news app.

vue tutorial about Style Navigation Based on Route in Nuxt

Style Navigation Based on Route in Nuxt

2:02 vue PRO

Your navigation should visually identify which page the user is currently visiting. This lesson walks through adding styles to the navigation element which matches the current page the user is viewing.

vue tutorial about Add a CSS Library from npm to Nuxt

Add a CSS Library from npm to Nuxt

2:01 vue

Many projects start by adding popular CSS libraries. Nuxt requires you to register the CSS library within the config so you can access the classes across you application. This lesson walks you through installing the Tachyons CSS library from npm, then adding it to your nuxt.config.js.

vue tutorial about Add JavaScript Libraries from npm to Nuxt

Add JavaScript Libraries from npm to Nuxt

2:03 vue PRO

You can install libraries from npm as usual, but you need to be aware of the vendor property of your nuxt.config.js so that the library only gets loaded once with your application. This lesson walks you through the appropriate steps of adding axios to your project and setting it up as a vendor library in your nuxt.config.js.

vue tutorial about Start a Nuxt Project with npx and the Vue.js CLI

Start a Nuxt Project with npx and the Vue.js CLI

1:19 vue

The initial setup of a Nuxt project is pretty straight-forward, but as with any project you’ll want to make a few tweaks of your own to get started. This lesson walks through the setup process and a few minor adjustments to get the News app on the right track.

vue tutorial about Split Vuex Store into Modules using TypeScript

Split Vuex Store into Modules using TypeScript

4:49 vue PRO

When the Vuex store grows, it can have many mutations, actions and getters, belonging to different contexts. Vuex allows you to split your store into different contexts by using modules.

In this lesson we’ll see how can we split the store in multiple Vuex modules using TypeScript

vue tutorial about Handle Forms Connected to a Vuex Store using TypeScript

Handle Forms Connected to a Vuex Store using TypeScript

2:02 vue PRO

v-model uses 2 way binding to make local state easy to update and connect variables to an input or component, in an implicit way. At the same time, that makes it difficult to combine it with Vuex, since getters and mutations/actions must be called explicitly.

This lesson shows you how you can apply the v-model functionality to a Vuex store by doing it in explicitly in 2 steps on a class-based component using TypeScript.

vue tutorial about Perform Async Updates using Vuex Actions with TypeScript

Perform Async Updates using Vuex Actions with TypeScript

3:30 vue PRO

Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous operation, they become useless.

Actions are a higher layer on the Vuex pattern, which allow to call mutations asynchronously or even call multiple mutations. This lesson guides you through using Vuex actions and type-safe them with TypeScript.

vue tutorial about Modify State by using Vuex Mutations with TypeScript

Modify State by using Vuex Mutations with TypeScript

2:47 vue PRO

Mutations are the only way to modify application state. They make updating state in an atomic and synchronous way easy to reason about.

This lesson will show you how to modify state by using Vuex Mutations. We will add type-safety with TypeScript using the @Mutation decorator (imported from vuex-class).

vue tutorial about Access State by using Vuex getter functions with TypeScript

Access State by using Vuex getter functions with TypeScript

2:38 vue

Accessing state directly can be ok for some cases, but in others we need another representation of state.

This lesson will show you how Vuex getters solve that issue and how to type-safe these getters with TypeScript using the @Getter decorator.

vue tutorial about Create a Vuex Store using TypeScript

Create a Vuex Store using TypeScript

3:32 vue

A Vuex store centralizes the state of your app, making it easy to reason about your state flow.

In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State decorator from Vuex Class

vue tutorial about Create your own Decorators in Vue with TypeScript

Create your own Decorators in Vue with TypeScript

2:30 vue PRO

We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

vue tutorial about Use AOP in Vue Components with TypeScript and Kaop-ts

Use AOP in Vue Components with TypeScript and Kaop-ts

7:20 vue PRO

Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. Kaop-ts bring us decorators in order to apply AOP. This lesson will show you how you can move cache and exception handling out of your business logic using TypeScript and Kaop-ts

vue tutorial about Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

3:26 vue PRO

Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.

vue tutorial about Create Type-Safe Vue Directives in TypeScript

Create Type-Safe Vue Directives in TypeScript

4:02 vue PRO

Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own Vue directive to change a component’s colors and type-safe it with TypeScript.

We’ll additionally show how you can pass objects to your directives and make them more flexible!

vue tutorial about Watch for Changes in Vue Using the @Watch Decorator with TypeScript

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

1:40 vue PRO

Vue watchers allow to perform async updates as a side effect of a property change. This lesson shows you how you can watch properties on your class based component and how to use the @Watch decorator for it.

vue tutorial about Extend Vue Components in TypeScript

Extend Vue Components in TypeScript

3:04 vue

This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. It will take you through extending a component, its properties and methods, and how hooks are triggered along the inheritance tree.

vue tutorial about Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

5:32 vue PRO

Using Object Oriented Programming, OOP, style allows us to apply Inversion of Control, IoC, and more patterns. An IoC container helps decoupling dependencies by using a class constructor or properties to identify and inject its dependencies. This lesson will show you how can you create and use an IoC container to decouple an http client and users service dependencies in a Vue component with TypeScript and InversifyJS.

vue tutorial about Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

2:17 vue PRO

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem!

vue tutorial about Use Properties in Vue Components Using @Prop Decorator with TypeScript

Use Properties in Vue Components Using @Prop Decorator with TypeScript

2:26 vue PRO

With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based Vue components by using the @Prop decorator from vue-property-decorator.

We’ll also see how we can set types and even default properties on @Prop!

vue tutorial about Write a Vue Component as a Class in TypeScript

Write a Vue Component as a Class in TypeScript

2:39 vue

Writing Vue components as plain objects has very limited capabilities for TypeScript’s IntelliSense. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using vue-class-component.

vue tutorial about Use Vue Router in TypeScript

Use Vue Router in TypeScript

3:19 vue PRO

vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based Vue components in TypeScript. We’ll also go over how we can create and use routes in Vue.

vue tutorial about Use Vue Tools to Navigate Across the Vuex State

Use Vue Tools to Navigate Across the Vuex State

1:29 vue PRO

Each mutation modifies one part of the state, making it easy to debug and redo-undo modifications. This lesson shows how you can do time-travel navigation and manipulation on you Vuex store by using Vue tools.

vue tutorial about Load components when needed with Vue async components

Load components when needed with Vue async components

2:47 vue PRO

In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

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 PRO

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 PRO

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 PRO

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.

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