How to import Vue component to script tag?

Question

I have some Vue components (.vue) in my Laravel project, resources\assets\js\components. I want to import the components to a view file .blade.php:

<div id='lol'>
    <some-component></some-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    import SomeComponent from '.\resources\assets\js\components\some.vue
    new Vue({
        el: '#lol'
    });
</script>

I got error in console: Uncaught SyntaxError: Unexpected identifier at the import

I don't wanna register the component in app.js

Single file .vue components must be compiled. You cannot just import them. This is why Webpack uses the vue-loader — Phil
Also, you can only import within JavaScript modules. Browser support for <script type="module"> is not currently very good — Phil

Stefan Stefan · Accepted Answer · 2020-04-28T15:38:33

If you don't want to use a compiler, you could use a library such as http-vue-loader, which provides a function to do just that.

Important: The author of the library itself does not recommend to use this library for production environments. Instead, he recommends you to compile your .vue files.

When using the http-vue-loader library, your snippet would look like this:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>


<div id='lol'>
   <some-component></some-component>
</div>

<script>
new Vue({
   components: {
      'some-component': httpVueLoader('./resources/assets/js/components/some.vue')
   },
   el: '#lol',

});
</script>

Alternatively, you can compile and export your vue component as a library, which you then can add to your project.

To export your component as a library, you first need to create an entry point for your component, for example: 'resources\assets\js\components\index.js'. In this entry point, you register your components globally.

import Vue from "vue";
import Some from "./some.vue"

const Components = {Some};

Object.keys(Components).forEach(name=>{
  Vue.component(name,Components[name])
})


export default Components;

Next, you need to define a build step for building your library in your package.json, which links to the entry point of your component:

"scripts": {
   ...
   "build-bundle" : "vue-cli-service build --target lib --name some ./resources/assets/js/components/index.js",
  ...
},

Next, call this build step, e.g. by invoking 'yarn build-bundle', or the npm equivalent.

Finally, you can add the compiled component to your webpage. Note, that you don't need to explicitly include your component, since you registered it globally before. Also note that you need to add the type="module" attribute to the script tage, because otherwise you cannot use the import statement. Finally, the outpath of the compiled libraries is the one that is used in your vue.config.js.

<div id='lol'>
   <some-component></some-component>
</div>

<script type="module">
import "/<path>/<to>/<compiled>/<library>/some.umd.min.js";

const app = new Vue({
  el: '#lol',
})
</script>

How to import Vue component to script tag?

1 Answers