Narnia Produced Magic

    vue-parser
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    Vue Parser

    Important

    A simple way to parse a .vue file's contents (single file component) to get specific content from a tag like a template, script, or style tag. The returned content can be padded repeatedly with a specific string so that line numbers are retained (ie. good for reporting linting errors). You can also get the full parse5 node/element which includes the location info of where the tag content is located.

    Basic Usage

    import vueParser from 'vue-parser'
     
    const vueFileContents = `
    <template lang="pug">
    .hello
      h1 {{ msg }}
    </template>
     
    <script lang="js">
    export default {
      name: 'Hello',
     
      data () {
        return {
          msg: 'Hello World!'
        }
      }
     
    }
    </script>
     
    <style>
    h1 {
      font-weight: normal;
    }
    </style>
    `
     
    const myScriptContents = vueParser.parse(vueFileContents, 'script', { lang: ['js', 'jsx'] })
     
    console.log(myScriptContents)
     

    The console output would like like this (notice default padding string is // since comments are typically ignored by linters/compilers/etc.):

    // 
    // 
    // 
    // 
    // 
    // 
    export default {
      name: 'Hello',
     
      data () {
        return {
          msg: 'Hello World!'
        }
      }
     
    }

    Install

    npm i vue-parser

    DownloadsWeekly Downloads

    14,022

    Version

    1.1.6

    License

    MIT

    Last publish

    Collaborators

    • prograhammer