Leverage Turing Intelligence capabilities to integrate AI into your operations, enhance automation, and optimize cloud migration for scalable impact.
Advance foundation model research and improve LLM reasoning, coding, and multimodal capabilities with Turing AGI Advancement.
Access a global network of elite AI professionals through Turing Jobs—vetted experts ready to accelerate your AI initiatives.
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.
We begin by creating a project called "using-slot-nuxt" with the Vue CLI. To do this, the following prerequisites must be met:
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.
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:
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:
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.
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.