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.
npm install pretty-xml-vue3 --save<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
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.