How to use with Nuxt3?

[Chippd]

I've been trying for the past week to figure this out.

The documentation shows how to use the Vue Google analytics plugin, but for anything that provides a custom html component, I cannot seem to figure it out.

I've found this answer which seems to get close, but no cigar.

I've also found this answer but no joy there either.

If someone can help me out I'm happy to submit a pull request with updated documentation for this project to explain how to use this great plugin for nuxt3 🙏

Thank you

[JustinSchulte]

May a bit late for the questioner, but I needed this recently and also had some trouble.
So i want to provide my solution:
(Using nuxt@3.0.0 and vue-json-pretty@2.2.3)

You just need to create a .js or .ts file in the /plugins folder:

import VueJsonPretty from 'vue-json-pretty'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('myJson', VueJsonPretty)
})

Then you only need to add the css at the nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  css: ['vue-json-pretty/lib/styles.css'],
})

So you could just use it by the given name at any template:

<myJson
	:data="someJson"
	v-model:selectedValue="selectedPath"
	:selectOnClickNode="true"
	:showSelectController="true"
	:selectableType="'single'"
	:deep="3"
></myJson>

May also notice that you have to use v-model:selectedValue= when you need the selection feature.
I wasn't aware of the multiple v-model pattern in Vue3 and think its not getting that clear from this documentation.

Hope this will still helps someone.

[Chippd]

Thanks for this, wish I'd known this back last summer!

I actually figured this out myself recently, my solution is slightly different and uses a component instead of a plugin, because I wanted some extra control over when the JSON is displayed or not (checking for admin access in my component before rendering it).

So the steps for me were:

1. Create a component (I called mine TheJsonPretty.vue in /components folder)

note: validateRole() here is a helper function I've made available globally in my app via the /composables folder

<-- TheJsonPretty.vue -->

<template>
  <VueJsonPretty :data="theData" v-if="validateRole('admin')"/>
</template>

<script setup>
import VueJsonPretty from 'vue-json-pretty';

defineProps({
  theData: Object
});
</script>

Use this component anywhere you want

<-- any file you want -->

<the-json-pretty :the-data="someData" />

3. Add the CSS to nuxt.config.ts like you did

// nuxt.config.ts
export default defineNuxtConfig({
  // ...
  css: ['vue-json-pretty/lib/styles.css'],
})

Hope that helps someone in future, or potentially future me :)