How to connect an external module to NuxtJS using Vue.js

Question

How to connect an external module to NuxtJS using Vue.js

Attempting to incorporate a widget/plugin/extension system into my existing web UI built with NuxtJS. Within the pages/view.vue single-file component, I aim to establish the extension system by dynamically loading components indicated through query parameters like /view?extension=example-a.

Potential Solution 1

The closest answer I found was on how to include an external JavaScript file in a Nuxt.js page. However, struggling with compiling the component as attempts to build a webpack resource from 'example-a' component failed to import correctly, resulting in an error message that stated:

[Vue warn]: Unknown custom element: <example-a> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Potential Solution 2

Considering utilizing http-vue-loader, but unsure where to begin.

Potential Solution 3

Perhaps overthinking it and there is a simpler solution out there.

javascript vue.js webpack nuxt.js

Answer 1

Answer №1

To incorporate all your components directly into your code, first ensure that you have loaded them. Next, extract the parameter from the URL using this.$route.query.extension (assuming vue-router is utilized). Finally, dynamically load the desired component by specifying it within the 'is' attribute of the

<component :is="..."/>

element.

<template>
  <div>
    <component :is="loadedComponent" v-if="loadedComponent !== null"/>
  </div>
</template>
<script>
  import exampleA from "./exampleA.vue";
  import exampleB from "./exampleB.vue";

  export default {
    data(){
      return {components:{'example-a':exampleA , 'example-b':exampleB }}
    },
    computed:{
      loadedComponent(){
        return this.components[this.$route.query.extension] ?? null;
      }
    }
  }
</script>

Answer 2

To incorporate all your components directly into your code, first ensure that you have loaded them. Next, extract the parameter from the URL using this.$route.query.extension (assuming vue-router is utilized). Finally, dynamically load the desired component by specifying it within the 'is' attribute of the

<component :is="..."/>

element.

<template>
  <div>
    <component :is="loadedComponent" v-if="loadedComponent !== null"/>
  </div>
</template>
<script>
  import exampleA from "./exampleA.vue";
  import exampleB from "./exampleB.vue";

  export default {
    data(){
      return {components:{'example-a':exampleA , 'example-b':exampleB }}
    },
    computed:{
      loadedComponent(){
        return this.components[this.$route.query.extension] ?? null;
      }
    }
  }
</script>

How to connect an external module to NuxtJS using Vue.js

Answer №1

Similar questions

How can I import a JavaScript file from the assets folder in Nuxt.js?

Refining to Showcase One Menu Selection

Unable to trigger onActivated in Quasar (Vue 3) component

Calculate the number of days required for the value in an item to multiply by two

Is it possible to communicate with a native chat application such as Pidgin using Node.js?

Error message: "Attempting to assign a value to the 'size' property of an undefined object, despite the fact that

Deciphering the hidden power of anonymous functions within Express.js

Is it possible to read an XML response as a stream using Ext JS?

Finding a nested div within another div using text that is not tagged with XPath

Having trouble displaying a popup dialog box in ASP.NET using JavaScript

What is the best way to organize code into separate files while utilizing a module that needs to be included in every file?

JQuery ajax DELETE request encounters issues during the OPTIONS stage

Ways to retrieve and contrast the border style of an image utilizing javascript

Displaying or concealing dropdown menus based on a selected option

Every time a GET request is made to the same route in Express.js, it seems to be stuck in a

Contrast in behavior when utilizing ng-include with webpack on a local environment compared to in a

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Deploying an Express.js application: The command 'PassengerAppRoot' is invalid, possibly due to a misspelling or being defined by a module not included in the server configuration

Utilizing NextJS Image Component in Conjunction with Auth0