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

Question

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?

You can use gulp

Kirill Matrosov
– Kirill Matrosov

2017-05-04 10:31:29 +00:00
Commented May 4, 2017 at 10:31 — Kirill Matrosov
– Kirill Matrosov, Commented May 4, 2017 at 10:31
Gulp+browserify+vueify? No simpler method to compile?

Timespace
– Timespace

2017-05-04 13:41:07 +00:00
Commented May 4, 2017 at 13:41 — Timespace
– Timespace, Commented May 4, 2017 at 13:41
No. The simpliest way is not to use *.vue files

Kirill Matrosov
– Kirill Matrosov

2017-05-04 14:02:19 +00:00
Commented May 4, 2017 at 14:02 — Kirill Matrosov
– Kirill Matrosov, Commented May 4, 2017 at 14:02

Bert · Accepted Answer · 2017-10-02 15:44:48Z

14

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.

edited Oct 2, 2017 at 15:44

answered May 4, 2017 at 15:26

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

9 Comments

Domino Over a year ago

As of 2017 it seems they had the great idea to remove such command. So I guess it's back to gulp? Ugh...

Bert Over a year ago

@JacqueGoupil I believe the plans are to move it into a plugin for vue cli. It looks like they may be in the process of that. When I find out more I'll update the answer.

Bert Over a year ago

@JacqueGoupil The build tool is still available in v2.8.0. I suggest for now if you want to work with it you use that version. I updated the answer with the correct link.

MewX Over a year ago

In 2.9.*, they removed this command. Instead, they recommended to use poi (github.com/egoist/poi).

Bert Over a year ago

@MewX Yep, that's addressed in the comments above.

|

Jeremy · Accepted Answer · 2021-04-01 19:02:42Z

6

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>

answered Apr 1, 2021 at 19:02

Jeremy

1,7773 gold badges16 silver badges21 bronze badges

2 Comments

Zortext Over a year ago

So do we need to build it many many times during development to see how it runs? If so, development returns into a nightmare.

Jeremy Over a year ago

For practical development I have turned to running the vue cli dev server and developing the components in isolation. I create a simple test harness app that includes the component in question at the root. This gives a hot-reload dev setup. When I'm done developing, I then build using vue build and integrate it into my site. The hardest thing was just getting all the HTTP headers for XSS and Cookies to work correctly. Since the dev server runs on a different host/port then the dev instance of my app. You're right, the build time sucks. I also tried rollout. It's terrible build times too.

Franck Freiburger · Accepted Answer · 2021-03-20 17:45:42Z

2

_{(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)

edited Mar 20, 2021 at 17:45

answered Mar 14, 2021 at 15:57

Franck Freiburger

28.8k21 gold badges75 silver badges97 bronze badges

Comments

MrDuDuDu · Accepted Answer · 2021-11-09 19:23:12Z

0

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

answered Nov 9, 2021 at 19:23

MrDuDuDu

6346 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related