A simple tool to convert vue component to html

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

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

Install vue2html globally,

npm install -g vue2html

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 });

• 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.

• 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 :)

MIT © Muhammad Athif Humam