CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Timespace
Timespace

Reputation: 5671

Compile .vue file into .js file without webpack or browserify

Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below:

<head>
    <script src="vue.min.js"></script>
    <script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
    <script>
        Vue.component('comp', comp);
        window.onload = function() {
            new Vue({el: '#app'});
        }
    </script>
</head>
<body id='app'>
    <comp></comp>
</body>

or other similar/simpler way?

Upvotes: 22

Views: 19363

Answers (4)

MrDuDuDu
MrDuDuDu

Reputation: 634

I suggest to use this commands

npm install -g @vue/cli-service-global
npx @vue/cli build -t lib -d output input/app.vue

For more information type

npx @vue/cli build --help

Upvotes: 0

Jeremy
Jeremy

Reputation: 1728

2021 answer: Use the vue build my-component.vue -t lib command. This can be installed with npm i -g @vue/cli-service-global

vue build will create javascript in a dist/ directory. Add my-component.umd.js to your page with a <script> tag.

At this point, my-component is available on the window object. Here is an example registration:

    <script src="https://unpkg.com/vue"></script>
    <script src="dist/my-component.umd.js"></script>
    <script>
    new Vue({
      components: {
        "my-component": window["my-component"]
      }
    }).$mount('#app')
    </script>

Upvotes: 6

Franck Freiburger
Franck Freiburger

Reputation: 28538

(disclamer: author here)

vue3-sfc-loader (that works for Vue2 & Vue3) allows you to load a .vue file (including its dependancies) directly from your browser (without webpack or node.js).

vue3-sfc-loader supports template & style pre-processors (see examples)

Upvotes: 2

Bert
Bert

Reputation: 82489

The vue-cli tool (version 2.8.0) has a build command that you can run to build an individual component.

vue build Component.vue --prod --lib

This will create an optimized bundle in UMD format, and the name of exported library is set to Component, you can use --lib [CustomLibraryName] to customize it.

You can take the built script and include it in your file like you are in your question. Technically it does use webpack under the hood, but you do not have to configure anything.

Upvotes: 14

Related Questions