How to Use Slots in Nuxt.js
•3 min read
- Languages, frameworks, tools, and trends
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:
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.
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.
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
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.