1. vue-parser
Get contents from tags in .vue files (using AST tree).
vue-parser
Package: vue-parser
Created by: prograhammer
Last modified: Mon, 23 May 2022 17:29:02 GMT
Version: 1.1.6
License: MIT
Downloads: 176,421
Repository: https://github.com/prograhammer/vue-parser

Install

npm install vue-parser
yarn add vue-parser

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!'
    }
  }

}

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code