pretty-xml-vue3

1.0.2 • Public • Published

Pretty Xml for Vue 3

Pretty XML is a simple XML viewer for Vue 3. The component formats and colors an XML document. You can reveal and hide the contents of tags. If you want to use Pretty XML in Nuxt, you should wrap it in ClientOnly.

Project Setup

npm install pretty-xml-vue3 --save

Usage

<script setup>
  import { PrettyXml } from 'pretty-xml-vue3';

  // content: string
  const content = '<?xml version="1.0" encoding="UTF-8"?><urlset  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">  <url>    <loc>https://example.com/news/651</loc>    <lastmod>2022-08-04T15:46:40.285Z</lastmod>  </url> <url>    <loc>https://example.com/news/650</loc>    <lastmod>2022-08-04T15:46:40.285Z</lastmod>  </url>  <url>    <loc>https://example.com/news/649</loc>    <lastmod>2022-08-04T15:46:40.285Z</lastmod>  </url></urlset>'

</script>
<tepmpate>
      <PrettyXml :xml="content" :options="{shortRecord:true}"/>
</template>

options: { shortRecord: Boolean } - optional value

Styles

You need manually import component's styles.

import "pretty-xml-vue3/style.css"
css-variable value
--tag-name-color rgb(207, 42, 42)
--tag-content-color rgb(0, 0, 0)
--attribute-name-color rgb(61, 133, 35)
--attribute-value-color rgb(42, 83, 207)
--remark-color rgb(134, 134, 134)

You can redefine css variables to adapt to your design.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.227latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.227
1.0.10
1.0.00
0.6.210
0.6.10
0.6.015
0.5.121
0.5.111
0.5.100
0.5.90
0.5.80
0.5.70
0.5.60
0.5.50
0.5.40
0.5.30
0.5.20
0.5.10
0.5.00

Package Sidebar

Install

npm i pretty-xml-vue3

Weekly Downloads

22

Version

1.0.2

License

none

Unpacked Size

14.2 kB

Total Files

6

Last publish

Collaborators

  • amfeon