22

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?

Timespace
  • 5,101
  • 7
  • 23
  • 32

5 Answers5

13

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.

Bert
  • 80,741
  • 17
  • 199
  • 164
  • As of 2017 it seems they had the great idea to remove such command. So I guess it's back to gulp? Ugh... – Domino Oct 02 '17 at 15:00
  • @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 Oct 02 '17 at 15:14
  • 1
    @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. – Bert Oct 02 '17 at 15:46
  • Thanks, I'll give that a try. – Domino Oct 02 '17 at 16:21
  • 1
    In 2.9.\*, they removed this command. Instead, they recommended to use `poi` (https://github.com/egoist/poi). – MewX Nov 23 '17 at 16:05
  • @MewX Yep, that's addressed in the comments above. – Bert Nov 23 '17 at 16:06
  • I ran poi build Component.vue --prod --lib but then it creates 3 javascript files with ugly names. Do I need to reference all three? Is this the best way to do it? – Jared Thirsk Jan 29 '18 at 02:57
  • @JaredThirsk You might ask that question on the Vue chat discord. Egoist (who wrote poi) hangs out there. – Bert Jan 29 '18 at 15:10
  • Thanks, @Bert. I ended up using rollup with a vue plugin and it nicely created a javascript and css for me, exactly as I'd hoped. – Jared Thirsk Jan 29 '18 at 22:33
  • Under Vue CLI v3, the build command is part of the CLI service. https://cli.vuejs.org/guide/#cli-service – David De Sloovere Aug 06 '18 at 12:05
5

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>
Jeremy
  • 1,397
  • 2
  • 13
  • 20
  • 1
    So do we need to build it many many times during development to see how it runs? If so, development returns into a nightmare. – Zortext Jul 23 '21 at 11:01
  • 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. – Jeremy Jul 27 '21 at 15:49
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)

Franck Freiburger
  • 26,310
  • 20
  • 70
  • 95
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
MrDuDuDu
  • 534
  • 5
  • 12
0

Now you can use vue-import to import .vue files directly in the browser, like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-import</title>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js",
        "vue-import": "https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.js"
      }
    }
  </script>
</head>

<body>
  <div id="app" v-cloak>
    <my-component></my-component>
  </div>
  <script type="module">
    import { createApp } from 'vue';
    import vueImport from 'vue-import';

    const app = createApp();
    app.component('my-component', await vueImport('comp.vue'))

    app.mount('#app');
  </script>
</body>
</html>

For more usage, please refer to:

https://github.com/kianfang/vue-import

Kian
  • 1
  • 2