How to convert component string as real component in vue

Question

Hi i have a requirement for plugin store where i need to load component from core into plugins and inside plugin i need to convert that string into real component so that i can use it.

Note: better approach is most welcome in the view of plugin store inside core

my pseudo logic

get component from specified path through http
convert loaded string into real vue component and store it in a variable
render it in dom

let componentAsString = 

`<template>
  <div>
      <h class="red">{{title}}</h>
      <!--<A></A> -->
  </div>
</template>

<script>
//import A from './components/A'

export default {
  name: 'App',
  data(){
      return {
        title:'Hello World'
      }
  },
  /*components: {
    A
  }*/
}
</script>

<style lang="scss" scoped>
   .red{color:red;}
</style>`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  
  
  <div id="app">

  </div>

I'm not sure if a component with data can work properly that way. If you can transfer component as a JavaScript object, it would be much easier. — Huy Phạm
– Huy Phạm, Commented Nov 23, 2021 at 10:08
@JakobE, i don't see any http call in defineAsyncComponent there are only imports — EaBengaluru
– EaBengaluru, Commented Nov 23, 2021 at 10:10
Dynamic import supports http url: const myComp = defineAsyncComponent(() => import('http://mywebsite.com/components/my-comp.vue') ) — Kapcash
– Kapcash, Commented Nov 23, 2021 at 10:31
anyone knows how to do this ? I have the same problem and dont know exactly how to do this? How to get an string from a server holding the code of a vue component, and properly create it and render it ? — jcmargentina
– jcmargentina, Commented May 17, 2024 at 13:02

tony19 · Accepted Answer · 2022-07-15 22:47:30Z

You have chosen very difficult approach to solve the requirement. Main problem is the content of the string - it is essentially a Vue SFC (.vue file). In order to turn this SFC into a Vue component usable in the browser a lot must be done. You must use Webpack (or Rollup or any other bundler), use vue-loader inside to parse the SFC and use different Webpack loaders to process each section of SFC (Babel to transpile the <scipt> block, sass-loader and sass compiler to turn <style lang="scss"> into CSS)

There are tools for doing most of this (with limitations) in the browser like for example vue3-sfc-loader but the cost is huge - vue3-sfc-loader weights around 1.4MB of minified javascript (add Vue itself or potential CSS preprocessor on top of that) and I bet performance of such solution will not be great either

Much easier approach is to use this standard tooling at build time

Just create your components as you normally do - in .vue files
Use your components as Async Components and build a "dictionary" of available components. Those components will be build at build time into separate js files and loaded into a browser on demand (when used)

// ComponentStore.js
export default {
  component1: () => import('./components/component1'),
  component2: () => import('./components/component2'),
}

Note: process of creating this dictionary can be automated too (inspiration)

Use the component as dynamic component

// DynamicComponent.vue
<template>
  <component :is="comp" />
</template>
<script>
import ComponentStore from "ComponentStore.js"

export default {
  props: ['componentName'],
  computed: {
    comp() {
      return ComponentStore[this.componentName]
    }
  }
}
</script>

Collectives™ on Stack Overflow

How to convert component string as real component in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related