# vue-parser

> Get contents from tags in .vue files (using AST tree).

Latest version **1.1.6** (published 2018-01-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-parser
pnpm add vue-parser
yarn add vue-parser
bun add vue-parser
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2018-01-10 |
| First published | 2017-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | David Graham |
| Maintainers | prograhammer |
| Keywords | vue, parser, ast, sfc |

## Links

- npm: https://www.npmjs.com/package/vue-parser
- Repository: https://github.com/prograhammer/vue-parser
- Issues: https://github.com/prograhammer/vue-parser/issues
- npm.io page: https://npm.io/package/vue-parser

## Dependencies (1)

- [parse5](https://npm.io/package/parse5.md) ^3.0.3

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.6 (latest) — 2018-01-10
- 1.1.5 — 2017-12-23
- 1.1.4 — 2017-12-23
- 1.1.3 — 2017-12-15
- 1.1.0 — 2017-12-14
- 1.0.1 — 2017-12-01
- 1.0.0 — 2017-11-28
- 0.0.3 — 2017-11-19
- 0.0.2 — 2017-11-19
- 0.0.1 — 2017-11-16

## README

# Vue Parser

![Important](https://travis-ci.org/prograhammer/vue-parser.svg?branch=master "Travis CI badge")

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](https://github.com/inikulin/parse5/blob/master/lib/index.d.ts#L193) 
 node/element which includes the location info of where the tag content is located. 

# Basic Usage

```javascript
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.):  

```text
// 
// 
// 
// 
// 
// 
export default {
  name: 'Hello',

  data () {
    return {
      msg: 'Hello World!'
    }
  }

}
```

---
_Source: https://npm.io/package/vue-parser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._