Convert single-file .vue components to JavaScript?

You can utilize vue-template-compiler to parse the *.vue files and extract the relevant sections.

I've written a node script which should do the job:

convert.js

const compiler = require('vue-template-compiler');let content = '';process.stdin.resume();process.stdin.on('data', buf => {    content += buf.toString();});process.stdin.on('end', () => {    const parsed = compiler.parseComponent(content);    const template = parsed.template ? parsed.template.content : '';    const script = parsed.script ? parsed.script.content : '';    const templateEscaped = template.trim().replace(/`/g, '\\`');    const scriptWithTemplate = script.match(/export default ?\{/)        ? script.replace(/export default ?\{/, `$&\n\ttemplate: \`\n${templateEscaped}\`,`)        : `${script}\n export default {\n\ttemplate: \`\n${templateEscaped}\`};`;    process.stdout.write(scriptWithTemplate);});

To convert all *.vue files to *.vue.js, run the following bash command inside the directory containing the *.vue files (assuming you're using linux or macOS):

find . -name '*.vue' -exec bash -c 'node convert.js < "{}" > "{}.js"' \;

This will result in the following conversion:

foo.vue

<template>    <div>a</div></template><script>    export default {        name: 'foo',    };</script><style>    /* Won't be extracted */</style>

foo.vue.js (generated)

export default {    template: `        <div>a</div>    `,    name: 'foo',};

You might want to tweak the script so that it deals with extracting the styles (however you want that to be handled) and fixing up whitespace and stuff like that.

I've put together an online vue converter which allows you to copy/paste your vue-file and convert it to said javascript.

https://fluxfx.nl/htools/vue-conv

This is my edit for Typescript

const parser = require("vue-template-compiler");const fs = require("fs");const path = require("path");const glob = require("glob");function getFiles(src, callback) {  glob(src + "/**/*.vue", callback);}getFiles(path.join(__dirname, "../src"), function(err, filePaths) {  if (err) {    console.log("Error", err);  } else {    filePaths.forEach(filePath => {      fs.readFile(filePath, "utf8", (err, data) => {        if (err) throw err;        const parsed = parser.parseComponent(data);        if (!parsed.script) {          return;        }        fs.writeFile(          filePath.replace("vue", "ts"),          parsed.script.content,          err => {            if (err) throw err;            console.log(`The file ${filePath} has been created!`);          }        );      });    });  }});

I am using it for sonarcube static analyses of my typscript codes, since sonarcube does not support vue SFC for now.

There is no cleanup, because I am running it in gitlab pipeline so after pipeline is done, it is all cleaned automatically.

Thanks :)