A guide to importing a Vue component in a JavaScript file

I am looking to achieve a specific behavior in my project: depending on a condition stored in my database, I want to load a particular vue.component instead of another. For example, within a file named discover.js, there is the following code:

Vue.component(
    'discover-component',
    require('./components/DiscoverComponent.vue').default
);

The goal is to only call the DiscoverComponent.vue if a specific boolean value is set to true for the user in the database. Otherwise, another component should be called. Here is a pseudocode example:

If flag is true:

    Vue.component(
        'discover-component',
        require('./components/TrueDiscoverComponent.vue').default
    );

Else:

    Vue.component(
        'discover-component',
        require('./components/FalseDiscoverComponent.vue').default
    );

My question is whether it is advisable to use an AJAX call in the .js file to retrieve the value of the flag. Is this practice considered acceptable, or would it be better to handle such data retrieval within a controller instead?

javascriptlaravelvue.jscomponents

Answer №1

If you're dealing with a similar situation, consider utilizing async components like this:

Vue.component('discover-component', async () => {
  const response = await fetch('/get-user'); 
  const user = await response.json();
  if (user.flag) {
    return import('./components/TrueDiscoverComponent.vue');
  }
  return import('./components/FalseDiscoverComponent.vue');
})

You can find more information on async components in the documentation page provided: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

Answer №2

My preferred approach would be as follows:


import ExploreComponent from './components/ExploreComponent.vue'
import DiscoverComponent from './components/DiscoverComponent.vue'


Vue.component({
    'explore-discover',

    components: {
        ExploreComponent, DiscoverComponent 
    }

    template: `
        <div>
            <discover-component v-if="condition" />
            <explore-component v-else />
        </div>
    `
})

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

Instructions for creating a JavaScript click function that iterates through all records, not just the initial record

Although I'm new to web development and still learning the basics of html, javascript, etc., I have a problem that seems quite simple. The challenge lies in understanding javascript functions, which I find particularly tough to grasp. Here's what ...

javascriptc#htmlasp.netasp.net-mvc

Tips for concealing select options after choosing with select picker?

Our establishment features three distinct rooms, each offering three identical options that users can choose from. https://i.sstatic.net/Jx4Me.png To illustrate, if a user named John selects option one in the first room, that same option will be hidden w ...

javascripthtmljquerybootstrap-5bootstrap-selectpicker

Clicking on the Submit button of the post form simply refreshes the page

Every time I try to submit values from an HTML form, the page reloads without any changes. I've double-checked the routes and controller, but everything seems correct. Solution <div class="panel-body"> @if (session('status')) ...

phphtmllaravel

Having issue with jQuery popup not functioning correctly on the right side with the contact form. Is there anyone who knows how

Looking for a side slide popup that only accepts paragraph content? Want to add a contact form to it? Check out this fiddle - link here For a working example, visit - $(function() { // Slide from right to left $('#test2').PopupLayer({ ...

javascriptjqueryhtmlcss

There seems to be an issue with the syntax in ReactJS: the URL is

I'm facing an issue in my React code. I have a function that doesn't seem to be in the correct format for React. check(img) { console.log(img,typeof img) const url=""; const arrN = ["15","16","35","36","37","38","39","40" ...

javascriptreactjsreact-router

Error: ng-messages syntax issue with the field parameter

Encountering the following error: Syntax Error: Token '{' invalid key at column 2 of the expression [{{field}}.$error] starting at [{field}}.$error]. when attempting to execute the code below (form-field.html) <div class='row form-grou ...

javascriptangularjs

Adding child arrays to a parent array in Angular 8 using push method

Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...

javascriptangulartypescriptangular8

I would greatly appreciate some guidance on asp.net and javascript

I am just starting out with JavaScript and facing some challenges. Currently, I'm struggling to develop a Mouseover and mouseout script. Here is my ASPX code: <div> <div id="div_img" style="height: 300px; width: 300px; border: solid 1p ...

c#javascriptasp.net

Issue with FileStreamResult not triggering download prompt after AJAX call in MVC

I am encountering an issue with my code that is triggered by the "export" li tag. It converts a FusionChart to an SVG string and then sends it to my controller via an ajax call. The problem I'm facing is that even though the controller receives the r ...

javascriptjsonajaxasp.net-mvcpdf

Error message 800A03EA in Windows Script Host encountered while running Express.js script

I'm currently diving into the world of JavaScript development, following along with the guidance provided in the book called "JavaScript Everywhere." The book instructs me to execute the following code: const express = require('express' ...

javascriptexpresssyntax

How can I incorporate a counter into my ng-repeat loop in Angular?

Do you know where I can find documentation on adding a numbered count to each item returned by an ng-repeat in Angular? This is not like assigning an Id, but more like, if 4 items are returned, each JSON object could include a number before the data. Her ...

javascripthtmlangularjsjson

Two separate buttons in two distinct views that trigger the same function in AngularJS

I am currently working on a Single Page Application (SPA) that has two distinct views - one for subjects and another for students. In the subject view, there is a save button located in app/views/subject/subject.html: <button type="button" class="b ...

javascriptangularjs

What is the process for choosing a category in the freebase search widget?

For my current project, I have been utilizing the Freebase Search Widget. It allows me to select words from a suggestion list in my input box. However, I am curious about how to also obtain the category in another text box. Here is an example that demonst ...

javascriptjquerygoogle-apifreebase

Having trouble with i18n types not functioning correctly in Typescript and Nuxt?

I am currently utilizing NuxtJS/i18n with TypeScript and have included its types in my TS config: { "compilerOptions": { "types": [ "@nuxt/types", "@nuxtjs/i18n", ] } } However, when attempti ...

typescriptvue.jsnuxt.jsvue-i18nnuxt-i18n

Utilize the power of DOJO JavaScript to implement Reverse AJAX functionality in

Exploring the possibility of implementing Reverse AJAX with the DOJO Javascript framework. Curious if DOJO has built-in support for this feature like other frameworks such as DWR. I am currently working with the most recent version of DOJO - any guidance ...

javascriptajaxdojoreverse-ajax

How to Send a JavaScript Array to a JSP Endpoint

I'm in the process of creating a web application that interacts with another website through a JS API. I would like to incorporate an array of JSON objects obtained from this API into my Java Application. Is there any way to submit this array, perhap ...

javascriptarraysjsonjsp

Displaying text that follows the cursor on a JavaScript mouseover event

When I hover over the pin with my cursor, the text should move along with the mouse. However, the current position of the text is off and needs to be adjusted to be next to the pin. What is a more accurate way to calculate the correct position? var toolt ...

javascriptjquerygsap

Implementing a feature that loads older posts on a webpage as users scroll down

Spent hours trying to get my site to automatically load older posts on scroll down with no luck. Any assistance is greatly appreciated :) After researching, [this tutorial][1] seemed like the best solution so I followed it step by step and integrated ever ...

javascriptphpwordpress

Executing Promises in a loop: TypeScript & Angular with IndexedDB

Currently, I am working on a data synchronization service where data is being retrieved from a web service and then stored in IndexedDB. In my TypeScript Angular Service, the code looks something like this: this.http .post(postUrl, postData) .suc ...

javascriptangularjstypescriptindexeddbangular-promise

Bringing tex2max.js into an angular application using npm and index.html

Every time I attempt to import tex2max with the command declare var tex2max: any;, I encounter a ReferenceError: tex2max is not defined. Interestingly, this issue does not arise with other npm packages. Despite trying various methods such as installing the ...

javascriptangularnpmimport