This page assumes you’ve already read the Components Basics. Read that first if you are new to components.

• Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
• I’m going to start with the basic setup that Vue.js gives us when using the command line, but I’ll delete some things we don’t really need in the templates.

Slot Content

In the previous article Getting-Started-With-Vue it was discussed how to install the vue-cli. So in this article let’s start by creating an app with the vue-cli. vue create my-portfolio. This above command will direct the vue-cli to create an app template by the name my-portfolio. Once the app is created to run the second command: vue.

Vue implements a content distribution API that’s modeled after the current Web Components spec draft, using the <slot> element to serve as distribution outlets for content.

This allows you to compose components like this:

Then in the template for <navigation-link>, you might have:

When the component renders, the <slot> element will be replaced by “Your Profile”. Slots can contain any template code, including HTML:

Or even other components:

If <navigation-link> did not contain a <slot> element, any content passed to it would simply be discarded.

Named Slots

There are times when it’s useful to have multiple slots. For example, in a hypothetical base-layout component with the following template:

For these cases, the <slot> element has a special attribute, name, which can be used to define additional slots:

To provide content to named slots, we can use the slot attribute on a <template> element in the parent:

Or, the slot attribute can also be used directly on a normal element:

There can still be one unnamed slot, which is the default slot that serves as a catch-all outlet for any unmatched content. In both examples above, the rendered HTML would be:

Default Slot Content

There are cases when it’s useful to provide a slot with default content. For example, a <submit-button> component might want the content of the button to be “Submit” by default, but also allow users to override with “Save”, “Upload”, or anything else.

To achieve this, specify the default content in between the <slot> tags.

If the slot is provided content by the parent, it will replace the default content.

Compilation Scope

When you want to use data inside a slot, such as in:

That slot has access to the same instance properties (i.e. the same “scope”) as the rest of the template. The slot does not have access to <navigation-link>‘s scope. For example, trying to access url would not work. As a rule, remember that:

Nested Slots Vue Js 2.2

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.

Scoped Slots

New in 2.1.0+

Sometimes you’ll want to provide a component with a reusable slot that can access data from the child component. For example, a simple <todo-list> component may contain the following in its template:

Nested Slots Vue Js Login

But in some parts of our app, we want the individual todo items to render something different than just the todo.text. This is where scoped slots come in.

To make the feature possible, all we have to do is wrap the todo item content in a <slot> element, then pass the slot any data relevant to its context: in this case, the todo object:

Now when we use the <todo-list> component, we can optionally define an alternative <template> for todo items, but with access to data from the child via the slot-scope attribute:

In 2.5.0+, slot-scope is no longer limited to the <template> element, but can instead be used on any element or component in the slot.

Destructuring slot-scope

The value of slot-scope can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments (single-file components or modern browsers) you can also use ES2015 destructuring in the expression, like so:

This is a great way to make scoped slots a little cleaner.

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

As your Vue.js Single Page Applications (SPAs) become moderately complex, you start to need Vue Router, and, moreover, nested routes. Nested routes allow for more complex user interfaces with components nested inside each other. Let’s build out a relatively simple use case that shows the utility of nested routes in Vue Router.

Setup with the Vue CLI

If you don’t have it installed already, install the Vue CLI globally by running either:

Or

Now you will be able to run the vue command from the command line. Let’s create a Vue application called alligator-nest:

Choose the default preset at the prompt (hit the enter key). After that, run the following command:

Then, go ahead and open up the alligator-nest directory in your editor of choice.

Base Code

The following CSS will help us with positioning elements for our UI. Add it as a stylesheet file in the public/ folder and reference it in public/index.html. We’ll be making use of CSS grid for this:

Next, let’s make some changes to the default files that vue-cli added.

Delete HelloWorld.vue from the src/components folder and delete any mention of it from src/App.vue. Make the following modifications to the HTML markup and CSS styling in App.vue.

If you run npm run serve in the project’s root directory you can mouse over to localhost:8080 in your browser and see a skeleton layout. Those display: grid properties are useful! Now we can begin routing.

Enter Vue Routing

Let’s whip up a component called AboutPage.vue in our /components folder. It will look like this:

Now our main.js file needs an /about route. It will look like this.

Finally let’s go back to App.vue and change the anchor tag for “About” to a <router-link> tag with an attribute of to='/about'. Then, change the second div to a <router-view> tag. Make sure to keep the grid positioning class attributes intact.

We now have a functional site skeleton with routing handled for the About page.

Nested Slots Vue Js Tool

We’re focusing on the routing functionality here so we’re not going to get fancy with styling. Even so, the Travels page is going to look more elaborate.

To start, create a TravelPage the same way you created an AboutPage. Reference it in main.js.

Also create the following two components which will ultimately be nested in TravelPage.vue:

Nested route configuration

Now, let’s update both main.js and TravelPage.vue to reference those nested routes using children. main.js must be updated to have the following definition for the routes constant:

Note that the nesting of children can continue infinitely.

And TravelPage.vue can be written in the following way:

Check out localhost:8080 and you will see that the Travels page has 2 subpages within it! Our URLs update accordingly when you click on either link.

Conclusion

Hopefully this tutorial was useful for you in seeing how to get started with nested routes!

Other things to keep in mind on the topic — we could have routes defined with dynamic segments such as path: '/location/:id'. Then, on the views for those routes we can reference that id as this.$route.params. This is useful when you have more data of a particular type (users, pictures, etc.) that you are wishing to display on your site/app.

🐊 Later!