vue2html

A simple tool to convert vue component to html

DISCLAIMER: This library are still in development, so there's many missing features.

Table of Contents

• Install
• Usage
• Options
• Contributors
• Known Issues
• License

Install

Install vue2html globally,

npm install -g vue2html

Usage

Now, you just need to pass your .vue file as the argument. You can pass as much as you want. Directory or Components paths.

vue2html Component.vue App.vue ./components 

Use --help or -h to see all the available options.

vue2html --help

Or you can also call it programmatically.

npm install vue2html

const { compileToHTML } = require('vue2html');
const path = require('path');
 
// Single path
compileToHTML('./Component.vue', {
  props: {},
  // Pass vue-server-renderer's `context`
  context: { 
    title: 'vue ssr',
    metas: `
        <meta name="keyword" content="vue,ssr">
        <meta name="description" content="vue srr demo">
    `,
  },
  writeToFile: true
});
 
// Multiple paths
compileToHTML(['./Component.vue', './Header.vue'], {
  // Note: the order of the props need to be the same with the order of the paths
  props: [
    { name: "Athif Humam", count: 12 },
    { color: 'black' }
  ],
  writeToFile: true
});

Known Issues

• If you use tailwind please remember that it would take more time to generate than without it, especially if you also use purge option. I mean that's just how it should be. I can't change it even if I want to.

• Component's style included in other components. I don't know why this happens, and I honestly doesn't really want to care much about this right now. But don't worry if you use scoped style, it would be safe even if it included in other components... I think.

TODO

• Add css
• Add postcss plugins
• Add Tailwindcss
• Can pass folder path as an argument, like ./components
• Add more test
• Convert raw string instead of file

I haven't found a way to do this yet, and as far as I know, rollup only allowed file path to be passed to their input options. If someone know about this, please do tell me or you can just open up a PR. I would really appreciate it :)

Contributors

Name	Website
Muhammad Athif Humam	https://athif23.github.io/

License

MIT © Muhammad Athif Humam