A simple tool to convert vue component to html
DISCLAIMER: This library are still in development, so there's many missing features.
Install vue2html globally,
npm install -g vue2htmlNow, 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 --helpOr you can also call it programmatically.
npm install vue2htmlconst { 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 :)
| Name | Website |
|---|---|
| Muhammad Athif Humam | https://athif23.github.io/ |