FOR DEVELOPERS

How to Use Slots in Nuxt.js

How to Use Slots in Nuxt.js

Slots are a method of passing content to a component in Vue.js. They enable you to specify a portion of a component's template that the parent component can take the place of. This lets the parent component manage the child component's design and content.

In simple terms, a slot is used to pass HTML elements and other content from the parent to its child component for rendering. For this article, we will use the Vue.js framework, Nuxt.js. We will explore Nuxt.js slots, how to use them, and how they work.

How to use Nuxt.js slot (default slot)

We begin by creating a project called "using-slot-nuxt" with the Vue CLI. To do this, the following prerequisites must be met:

  • Node: We recommend you have either 16.x or 14.x installed.
  • VS Code for a text editor.
  • VS Code's integrated terminal "npm init nuxt-app using-slot-nuxt".
  • The latest version of Nuxt. For this article, we are using nuxt: 2.15.8.

To learn how to create a Nuxt.js project, check out this article: How to Install and Create Your First Nuxt.js App.

In the components folder, we create a file called InfoModal.vue. We then add this block of code in InfoModal.vue.

<template>
  <div class="container">
    <div class="inner">
      <div>
        <h2 class="modal-header">Info Modal</h2>
	<slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2525252f;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
.inner {
  text-align: center;
  width: 30%;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}
</style>

Here’s a brief explanation of what we just did:

We created a modal inside the component that we will use to show some content from the main page. Notice the slot tag we added? That's what is used to display the content from the outer page. The slot tag needs to be applied to the child component for the contents to appear there.

Next, we go to our index.vue page, which was automatically created when we created the Nuxt app. Here, we will add the InfoModal component we created.

<template>
  <div class="main-container">
      <div class="ctn">
        <h2 class="header">Home Page</h2>
        <InfoModal>
          <p>This is an Information Modal</p>
          <p>Every Information will be shown here</p>
        </InfoModal>
      </div>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
}
</script>
<style scoped>
.header {
  text-align: center;
  margin-top: 20vh;
}
</style>

Output:

output Nuxt.js  infomodal  component default slot_11zon.webp

That is how to use slots in Vue.js.

What happens when there are multiple slots? The next section illustrates this.

How to use multiple slots (named slots)

To use multiple slots, we need to name our slots.

Let's add a block of code in the InfoModal.vue file.

<template>
  <div class="container">
    <div class="inner">
      <div>
        <slot name="title" />
        <slot name="sub-title" />
        <slot name="content" />
      </div>
    </div>
  </div>
</template>

We gave each slot a different name so we will have different content for each slot.

On the index.vue page, we add this code:

<template>
  <div class="main-container">
      <div class="ctn">
        <h1 class="header">Home Page</h1>
        <InfoModal>
          <h2 slot="title">About Turing</h2>
          <h4 slot="sub-title">This is an information about Turing</h4>
          <p slot="content">Turing is a data science-driven deep jobs platform helping companies spin up their engineering teams in the cloud at the push of a button</p>
        </InfoModal>
      </div>
  </div>
</template>

We added each content based on their slot names.

Output:

output Nuxt.js  infomodal  component named slots_11zon.webp

InfoModal component as a form modal

In this example, the InfoModal will accept forms. It already has the modal design with a button.

InfoModal.vue
<template>
  <div class="container">
    <div class="inner">
      <div>
        <slot name="content" />
        <button class="btn">Submit</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2525252f;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}
.inner {
  text-align: center;
  width: 30%;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px;
}
.btn {
  margin-top: 40px;
  padding: 10px 20px;
  background-color: rgb(37, 76, 236);
  border: none;
  color: white;
  border-radius: 10px;
}
</style>

Doing this allows us to use the InfoModal component as a form modal anywhere in our app.

Index.vue
<template>
  <div class="main-container">
    <div class="ctn">
      <h1 class="header">Home Page</h1>
      <InfoModal>
        <template #content>
          <div>
            <h2>Contact Us</h2>
            <h4>This is a contact form</h4>
            <form action="">
              <div class="input-ctn">
                <label for="">Name</label>
                <input type="text" />
              </div>
              <div class="input-ctn">
                <label for="">Message</label>
                <input type="text" />
              </div>
            </form>
          </div>
        </template>
      </InfoModal>
    </div>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
}
</script>
<style scoped>
.header {
  text-align: center;
  margin-top: 20vh;
}
.input-ctn {
  margin-top: 15px;
}
</style>

We added #content to the template tag to display the content. #content is the short form of v-slot:content.

Output:

output InfoModal component as a form modal_11zon.webp

Conclusion

You’ve learnt how to use Nuxt.js slots, including default and multiple ones, as well as the InfoModal component as a form modal. Slots are an excellent feature of Vue.js that you can use to customize your components further, making it easy to pass data across various parts of your application.

Slots help create reusable components with ease. They can aid with scalability, save valuable development time, and be adjusted as needed.

Author

  • How to Use Slots in Nuxt.js

    David Emaye

    David Emaye is a Frontend Developer and Technical writer who loves learning, teaching, and building web tools and applications. He has more than two years of commercial experience providing frontend development, producing high-quality, responsive websites and exceptional user experience.

Frequently Asked Questions

Default slots are used when you want to be able to insert HTML into a certain portion of a component but don't know what your use case will be.
Simple use of the slot element on the child component declares default slots. You don't need to add anything unique to your parent component for your HTML to pass.

Thanks to slots in Vue.js, a component can render dynamic material known as slot content in a defined area on the component's template, which is called the slot outlet. The slot> element specifies this location.

HTML can be inserted into a specific section of the component using named slots. This is helpful when you want to have many slot sections in a single component, something that would otherwise be challenging to do. The slot name element on the child component is used to declare named slots.

Using slot-scope in the template, components containing slots can expose their data by feeding it into the slot. Using this method, you can transfer props from parent to child components without linking them.

Slots are designated areas that Vue.js makes available for the display of content that is provided from one component to another.

Props are data-filled apertures inside of a component. When a component has a prop, it anticipates receiving data from the component or view it is imported into. You can refer to this additional component as the parent component.

Slots, which resemble props, are openings within a component. Unlike props, they can take other markups or more components in addition to data.

View more FAQs
Press

Press

What’s up with Turing? Get the latest news about us here.
Blog

Blog

Know more about remote work. Checkout our blog here.
Contact

Contact

Have any questions? We’d love to hear from you.

Hire remote developers

Tell us the skills you need and we'll find the best developer for you in days, not weeks.