What is causing this issue that is preventing me from async rendering Vue components?

I am new to working with Vue and I am attempting to lazy load a Component. However, I encountered an error that seems to be related to a syntax issue. Below is the code snippet:

<template>
    <div class="container">
    <h1>Async testing</h1>
    <button @click="showModal=!showModal">show modal</button>
    <Modal v-if=showModal />
    </div>
    
</template>

<script>

import { defineAsyncComponent, ref } from 'vue';
    export default {
        components: {
          Modal: () => defineAsyncComponent(
            () => import('@/components/Modal.vue')
          )
        },
        setup(){
            const showModal = ref(false);
            return {
                showModal
            }
        }
    }
    
</script>

The Modal Comp consists of a simple h2 and a p element inside a container with a red border (The code worked without lazy loading). The following error is being displayed: https://i.sstatic.net/G18s7.png

Answer №1

When you wrap defineAsyncComponent() in a function, you are mistakenly declaring the Modal component as a function:

export default {
  components: {
        /* 👇 avoid this mistake */
    Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

To fix this issue, simply remove the function wrapper:

export default {
  components: {
    Modal: defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

demo

Answer №2

Seems like there is a bit of confusion between the composition API and options API

Here's a suggestion for your <script> section

import { defineAsyncComponent, ref } from 'vue';
export default {
    setup() {
        const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
        const showModal = ref(false);
        return {
            showModal,
            Modal
        }
    }
}

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

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

When incorporating @babel/standalone, a JavaScript memory limit is exceeded

I am currently working on a React app that I developed using create-react-app. My main goal is to take user input as code and then evaluate it in order to render the output. Here's what I have attempted so far: import React, { Component } from &apos ...

Raycast in Three.js is struggling to locate object

Whenever I select a 3D model, my goal is to retrieve the object's ID, name, or the actual object itself in order to effectively delete it. function onDocumentMouseDown( event ) { if (enableRaycasting){ event.preventDefault(); mouse.set( ( event.c ...

Do you need to have knowledge in reactjs in order to master react-native?

As I embark on the journey of learning how to build apps using react-native, a burning question arises in my mind: should I first learn react-js before diving into react native? Any guidance or advice would be greatly appreciated. Thank you. ...

I am eager to showcase a Pokémon image sourced from the API, but I am faced with the challenge of only having the image URL and not knowing how to display it effectively

As a beginner in programming, I am seeking some assistance. I have been able to retrieve a random Pokémon from an API and gather its data, including the ID, name, and picture. My main focus now is to display the image of the Pokémon in the custom modal I ...

Creating a JavaScript alert in Selenium Java WebDriver with a concise message

While running a Selenium Java program, I am attempting to create a JavaScript alert window with a specific string message. I came across a method that involves executing JavaScript within Selenium by interacting with hidden elements: WebDriver driver; Java ...

How to use Sencha Touch to automatically target a textfield on iOS programmatically?

My goal is to implement a pin login feature similar to the ones found on iOS and Android platforms, where users are required to enter a 4-digit pin to proceed. The issue I'm facing is that I want the input field to be automatically selected and the nu ...

Combining various FormGroup types into a single object type in Angular 5

I am currently utilizing the mat-stepper feature from the Angular Material design library. Within my application, I am using 3 separate FormGroups to gather information and send it to a database using the httpClient method. To achieve this, I have defined ...

How can I use oboe.js to target a specific node instead of selecting all matching nodes?

Currently, I am receiving a JSON array through an http stream. The objects within this array are structured as follows: { "ID" : 1234, "Item" : { "ID" : "ABC123", "name" : "a thing" } } In reality, the objects are part of an array and look ...

Attempting to interpret HTML in Javascript

I have a text string that contains HTML tags. Initially, I attempted to insert this using innerHTML, but the tags were displayed as plain text. After some troubleshooting, I realized that I needed to properly parse the HTML content. Although jQuery prov ...

Conceal the year, month, and day within a datetime-local input

I am working with <input type="datetime-local" step="1"/> input fields, and I want users to only be able to edit the hours, minutes, or seconds. This is due to setting the minimum value using let min = new Date().setHours(0,0,0) and the maximum value ...

Updating token (JWT) using interceptor in Angular 6

At first, I had a function that checked for the existence of a token and if it wasn't present, redirected the user to the login page. Now, I need to incorporate the logic of token refreshing when it expires using a refresh token. However, I'm enc ...

Dealing with error messages when working with an array input field in Laravel using VuejS

Recently, I delved into a project involving Laravel and VueJS. One of the challenges I encountered was dealing with an array input for job roles and responsibilities in a form request. Here is a snippet of how I defined the rules: public function rules() ...

Preventing jQuery from loading a div if it already exists: a step-by-step guide

I've encountered an issue with a mock console on my website - every time the same input value is submitted more than once, jQuery reloads the div due to its specific id. Instead of cloning the div, I decided to append a message indicating that it alr ...

Iterating over an object and inserting values into a JavaScript object using the ascending count as the identifier

Illustration: { Are you a coffee drinker?: yes, Do you like to exercise regularly?: no, How often do you eat out at restaurants?: 3 times a week, What is your favorite type of cuisine?: Italian } Results: {yes: 1, no: 1, 3 time ...

Sending an image file using AJAX and jQuery

I am currently using Mustache JS to generate a template called 'addUser1' for display purposes. However, when I execute this code, only the image location is being sent to the server, not the actual image itself. What could be causing this issue? ...

Is it commonplace for redux to generate an abundance of storage?

I'm noticing a lot of lines in the terminal, is it really necessary to create so many storage instances? 4. The WrappedApp just created a new store with withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined } 14:47:39.619 ...

Prevent the bottom row from being sorted

I have implemented sortable table rows in my angular project, however the sorting functionality also affects some query-ui code elements. Now I am looking to exclude the last row from being sortable. HTML <div ng:controller="controller"> <ta ...

issues related to implementing search functionality with react-redux

Just starting out with my first react-redux project which is a list of courses, but I have hit a roadblock with redux. I am trying to implement a search functionality based on this answer, and while I can see the action in redux-devtools, it's not ref ...

Oops! An error has occurred: The requested method 'val' cannot be called on an undefined object

I am struggling with this issue. This is the code that I am currently working on: http://jsfiddle.net/arunpjohny/Jfdbz/ $(function () { var lastQuery = null, lastResult = null, // new! autocomplete, processLocation = function ...