how to call a vue component outside of instance in javascript?

Question

I developed some vue component (grid,popup,layout..) by webstorm with (vue-cli..webpack ...) .

My development environment: webstorm + webpack + vue-cli

Now i want to know how i can use that in a javascript?

i can call it like this In main js , i write .. import Grid from './Grid' window.$grid = Grid
and i use webpack package app.js (mycode and others..)

My demo.html

1.<script src=app.js> <script src=demo.js>
2.<div id="showdiv"></div>
3.

demo.js

$('showdiv').append('<grid :options="options"></grid>')
var grid = window.$grid
var gridvue = new Vue({
      el: '#showdiv',
      data: {
        options: options
      },
      components: {grid}
    })

But if i use more component.vue i must create the same numbers of new Vue I dont think it's a good way to use vue outside.

I'm very grateful to who answer my question , thanks! sorry for my english...

hpym365 · Accepted Answer · 2017-01-26 05:38:31Z

1

webpack.config.js

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].js'),
    library: 'senyint',//package name senyint  window.senyint
    libraryTarget: 'umd',//package type umd
    umdNamedDefine: true,
    chunkFilename: utils.assetsPath('js/[id].js')
  },

main.js

exports.scom = {
  Bug, Hello, Grid, Div, Button, Loading
}

demo.html

<script src='/dist/js...all'>
//we can call the component   
window.senyint.scom.Grid  like this..

answered Jan 26, 2017 at 5:38

hpym365

416 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 05:35:36Z

0

I think you may have become a little confused about how components work in Vue, in your case you can simply create single file components with each component registering it's own dependencies:

Gridvue.vue

<template>
  <div>
     <grid :options="options"></grid>
  </div>
</template>

<script>
import Grid from './Grid.vue

export default {
   components: {
     Grid // register grid so it can now be used inside the component
   },
   props: ['options']
}
</script>

Now when you want to use gridvue you import it in to a separate component, for this example I'll use the main entry point of your app called App.vue:

App.vue

<template>
  <div>
    <grid-vue :options="options"></grid-vue>
  </div>
</template>

<script>
import GridVue from './GridVue.vue

export default {
   components: {
     GridVue // register GridVue so it can now be used inside the component
   },
   data(){
     return {
       options: {}
     }
   }
}
</script>

Now you mount App.vue to the main vue instance:

import App from './App.vue';

new Vue({
    name: "App",
    render: h => h(App)
}).$mount('#app');

And in your HTML you simply have:

<div id="app"></div>

Now you have one main vue instance that serves up your components. Notice that I'm not attaching anything to window or using jQuery to attempt to inject anything into the view port, I'm simply building up my components one at a time and registering them in the components I need them in.

edited Jul 16, 2022 at 5:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 25, 2017 at 10:19

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

3 Comments

hpym365 Over a year ago

Maybe i didnt discribe my question. i know vue how to work in SPA. but now package some componentvue.vue for javaer use.It's some component.vue(grid.vue layout.vue popup.vue ).And i must use it in jsp.html.js. For example: javaer write a business page with a grid a popup and a layout. how can they includ my package ?

craig_h Over a year ago

Sorry, I'm not sure what you're attempting to do, could you give a simplified example on JSFiddle?

hpym365 Over a year ago

see it github.com/hpym365/vue-element It's my project. It can run with npm run dev. But i want to use the project like a plugin. In other project,just import it , and use the component vue of the project. Thanks

Collectives™ on Stack Overflow

how to call a vue component outside of instance in javascript?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related