passcod / vue-sfc-parser

A limited parser for Vue Single File Components

Vue SFC Parser

• Dual-licensed with Apache 2.0 and MIT.
• Uses Caretaker Maintainership.
• Zero dependencies, 2KB minified, <1KB gzipped.

Parses a Vue-style Single File Component in a limited fashion for further post-processing, with no dependencies, suitable for use in a Service Worker or other such constrained environment.

Parses only the top-level tags and provides their content as strings. Does not prescribe any set of top-level tags, it will just parse everything. Also supports HTML comments. Has some support for attributes on top-level tags, such as for <style scoped> and <script type="text/typescript">. Supports nested <template> tags (it will leave interior ones as string content but it internally keeps track for proper parsing).

Does not support the string </script> inside a script tag, and similarly for other tags. Just break it up e.g. "<" + "/script>" if you need to.

Install

• Via npm: npm i https://github.com/passcod/vue-sfc-parser.
• From the latest release.
• Or copy the relevant file(s) from the dist/ folder.

Use

// either
import parseSfc from '/path/to/sfc-parser.mjs';
// or
import parseSfc from '/path/to/sfc-parser.js';
// or
import parseSfc from 'vue-sfc-parser';
// or
require('sfc-parser.umd.min.js', (parser) => { ... });
// etc

const file = `
<template>
    <div>Hello {{ name }}</div>
</template>

<script>
export default {
    data () {
        return {
            name: 'World',
        };
    },
}
</script>

<style>
div {
    font-weight: 500;
    text-decoration: overline red 2px;
}
</style>
`;

// throws on parse errors
const sfc = parseSfc(file);

assertEq(sfc.length, 3);
assertEq(sfc[0].tag, 'template');
assert(sfc[2].content.contains('overline'));
// or something more useful