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.
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.
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.
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.
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 ...
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...
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.
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.
How do we set up a simple app with its own routes with their own components 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.
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...
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 ...
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...
showing All 36 lessons...
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
isClient to navigate and avoid reloading data.
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.
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.
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.
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.
You can easily add CSS libraries to Nuxt using
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
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.
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.
store directory. This lesson walks you through setting up a basic store and using it in your template
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.
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.
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
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.
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
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
.trim allow us to trim our methods and let Vue take care of things like trimming white space.
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.
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.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.