showing All 70 lessons...
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.