pretty-xml-vue3 v0.6.2

PrettyXml

Pretty Xml is a simple xml viewer for Vue 3. The component formats and colors an XML document.

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"

You can redefine css variables to adapt to your design.