Vue.js issue: Custom elements within named slots must use the '<template>' tag

When attempting to pass data through slots, I encounter an error message:

'Named slots must use '' on a custom element.'

Please find my code below for reference.

    <template>
        <div>
            <h3>Home</h3>
            <User v-slot:user="{ user }">
                <template>
                <div v-if="user">
                    <p>Logged-in as {{user.uid}} </p>
    
                    <!-- PASS USER STATE AS PROP -->
                    <UserProfile :user="user"/> 
                    <ChatList :uid="user.uid"/>
                </div>
                <Login v-else/>
                </template>
            </User>
        </div>
    </template>

The line causing the error is as follows:

    <User v-slot:user="{ user }">

Answer №1

It appears from your component names that the User component includes the "user" slot.

To correctly use the v-slot, it needs to be placed within a <template> inside the <User> tags:

<User>           👇
  <template v-slot:user="{ user }">
    <div v-if="user">
      <p>Welcome as {{ user.uid }}</p>
    </div>

    <Login v-else />
  </template>
</User>

View demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Google Analytics within an Angular Single Page Application

After implementing Google Analytics (GA) in my Angular single page application and placing the tracking code at the bottom of the main index.html, I encountered an issue regarding incorrect pageview results. <script> (function(i,s,o,g,r,a,m){i["Go ...

Compilation of geographic points within a database table

I am facing an issue with a JSON file structured like this: { "wijken": { "11": { "coords": "3.79073170001967,51.1717753664505,0 3.79020920176376,51.1723018883706,0 3.78989543642226,51.1729670713336,0 3.78983091856725,51.1736482209 ...

Vue Router generates a URL containing %2F when dealing with slug routes

I am facing an issue in my Vue 3 application where I need to create a route for dynamic slugs. Currently, when using RouterLink, the generated URL contains %2F instead of actual slashes which is not the desired result. For example, the current URL looks l ...

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

Change the $index value during every iteration within ng-repeat

After each iteration of ng-repeat in angularjs, I need to increment the $index value. I attempted to do so using ng-init in this way, but unfortunately it didn't work as expected and incremented at the start of the ng-repeat loop. Can someone provide ...

Utilizing the Intuit API in NodeJs to seamlessly attach images to items (products) in Quickbooks

I am currently working with the Quickbooks API and the NodeJS SDK (oauth-jsclient) and facing some challenges in uploading an image to an Inventory Item. According to the documentation (docs), it requires making a multipart/form-data post request to the en ...

When saving, Vue sporadically creates misleading error messages

Recently, I started a new Vue project that wasn't very populated. When I run the command below, everything runs smoothly... npm run serve However, as soon as I make a small change in my project and hit CTRL+S, the Vue instance is rebuilt and strange ...

Applying JavaScript to HTML - Implementing a function to only display an input statement when the "Yes" option is selected, otherwise keeping it hidden

I am currently delving into the world of JavaScript, aiming to comprehend its intricacies. With limited experience in this language, I have managed to successfully hide and unhide radio buttons based on user input. My next challenge lies in achieving a si ...

The Mapbox map fails to display properly upon initial page load

When my Mapbox map loads, I am experiencing issues with it only rendering partially. It seems that adjusting the width of the browser or inspecting the page will cause the map to snap into place and display correctly. To demonstrate this problem, I created ...

Setting the distance between marks on a material-ui slider is a handy customization feature to

I have customized a material-ui slider with some custom CSS and it is contained within a div of small width, requiring overflowX. How can I maintain a 5px margin between each mark on the slider? Check out the demo here https://i.sstatic.net/bxiXE.png Th ...

The variable referenced is not defined, resulting in a TypeError

Having some trouble with my code.. function compare(string,pattern){ var patternUpper = pattern.toUpperCase(); // Convert pattern to uppercase var stringUpper = string.toUpperCase(); // Convert string to uppercase for(var i=0;i<stringUpper.length-1 ...

Corrected typing mistakes using vuex

Currently, I am working on a project using Vue 3 and TypeScript. One issue I am facing is related to vuex. I have created a file named vuex.d.ts to access $store inside Components: import { Store } from 'vuex'; import { State } from '@/stor ...

How to properly handle string escaping within a JSON object

When I send this object as JSON response, it includes double backslashes in the URL. {"__type":"http:\/\/example.com\/contracts\/documents\/rendering\/instructions\/1\/0"} My desired response is: {"__type":"http:& ...

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Is there a way to create a code that will call one function, let's say toStart(), and then immediately call another function, toStop(), exactly two seconds after the first function is initiated? I want this process to continue until a specific button, ...

Content Mismatch: The webpage was accessed through a secure HTTPS connection, but a request was made for an unsecured resource. Access to this content has been denied as

Error: Mixed Content. The webpage at '' was accessed using HTTPS, but it tried to load an insecure resource ''. This request was blocked as the content needs to be served over a secure connection (HTTPS). ...

Unable to retrieve the desired information

Being new to development, I recently attempted an AJAX search and encountered the following issues. Upon running it, I received an "undefined" error message. How can this be resolved? This is where you enter text. <input id="word" type="text" placehol ...

What is the best way to add a CSS style to any element that has the .btn:hover pseudo-class, except for those elements with the class '.dropdown-toggle'?

Is there a way to apply a style to all my .btn elements when hovering, except for those with the .dropdown-toggle class? I've tried a couple of methods but ran into some issues: attempt 1: .btn:not(.dropdown-toggle):hover { background-color: inher ...

I am searching for an uncomplicated approach to eliminate duplicate arrays of objects

Question: const info=[ { id: 123, name: "dave", age: 23 , address:city:"chennai"}, { id: 456, name: "chris", age: 23, address:city:"delhi"}, { id: 789, name: "bob", age: 23, address:city:& ...

Swapping data between two HTML files and PHP

As I work on setting up a signup form for a MikroTik hotspot, I've encountered limitations with the device not supporting PHP. In order to pass the necessary variables from the device to an external PHP page where customer data will be saved and trial ...

Showing the test steps in an Allure report for a Jasmine Protractor framework test case

Is there a way to include test steps in an Allure report for Protractor? I am facing an issue where the test steps are not showing up as they do for Java language tests. The official Allure report documentation also does not provide any code samples for ...