{"_id":"@cgvweb/payload-live-preview-vue","_rev":"4-851e13e3d7cafce38212edc63c60ad2a","name":"@cgvweb/payload-live-preview-vue","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@cgvweb/payload-live-preview-vue","version":"0.1.0","author":{"url":"https://chrisgvdev.com","name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com"},"license":"MIT","_id":"@cgvweb/payload-live-preview-vue@0.1.0","maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"dist":{"shasum":"b974b856599be849983bd7567a98ec47614e70ad","tarball":"https://registry.npmjs.org/@cgvweb/payload-live-preview-vue/-/payload-live-preview-vue-0.1.0.tgz","fileCount":7,"integrity":"sha512-HiT1H5e6XTY05rPL+vjaKebekbH1RL/L+ZmaKVe0gF9bzJ/HWv4pAPc8t1MS86QHJXzqkbeP7fqnakClFiUjYQ==","signatures":[{"sig":"MEQCIGnki/GedJkRDT7wRlT9YFai/NOir68lCnOFm1xwpBgJAiAI8TUps35TjVCttvngJ5TPyaXDD7Bbd+h1+ZhppQGKFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5312},"main":"dist/index.js","_from":"file:cgvweb-payload-live-preview-vue-0.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"lint":"tsc","build":"tsup src/*.ts --format cjs,esm --dts","release":"pnpm build && pnpm version patch && pnpm publish --access=public"},"_npmUser":{"name":"cgvweb","email":"christian@chrisgvdev.com"},"_resolved":"/private/var/folders/nc/zlv2phs53kl4s6f54h3kpvv40000gn/T/e74d7a123319fb01126b18bd748b7d1e/cgvweb-payload-live-preview-vue-0.1.0.tgz","_integrity":"sha512-HiT1H5e6XTY05rPL+vjaKebekbH1RL/L+ZmaKVe0gF9bzJ/HWv4pAPc8t1MS86QHJXzqkbeP7fqnakClFiUjYQ==","_npmVersion":"10.2.0","directories":{},"_nodeVersion":"18.17.1","dependencies":{"@payloadcms/live-preview":"^0.2.2"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^6.7.0","payload":"^2.9.0","typescript":"^5.0.4","@types/node":"^18.15.11","@payloadcms/eslint-config":"^1.1.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/payload-live-preview-vue_0.1.0_1706898919744_0.6631762541460748","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@cgvweb/payload-live-preview-vue","version":"0.1.1","author":{"url":"https://cgvweb.com","name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com"},"license":"MIT","_id":"@cgvweb/payload-live-preview-vue@0.1.1","maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"homepage":"https://github.com/ChrisGV04/payload-live-preview-vue#readme","bugs":{"url":"https://github.com/ChrisGV04/payload-live-preview-vue/issues"},"dist":{"shasum":"a6fab077a1e05a19d3dd0d5d58555c0b2e9cc85b","tarball":"https://registry.npmjs.org/@cgvweb/payload-live-preview-vue/-/payload-live-preview-vue-0.1.1.tgz","fileCount":5,"integrity":"sha512-IeZmQqHes0avWFcxN/9AyA7QCSbm+AjnOu8HiLyTftBQBYAn48F5/+1xnNd6jT19KHh1BL1dLn00EdZJlk1mTg==","signatures":[{"sig":"MEUCIGdxjhYbJTusslI9za2rL2MXFio1hiQ8XMeXJoeiMfUDAiEA/NFKw3oRInJzXCyjCNKV2q1bX47kfr4ZLMQb7PCPqHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5340},"main":"./dist/index.mjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.mjs"}},"gitHead":"21592baba83bfe14f63853875e8dd38bb51831f5","scripts":{"lint":"biome lint ./src","build":"rimraf dist && tsup src/index.ts --format esm --dts","release":"release-it && npm run build && npm publish"},"_npmUser":{"name":"cgvweb","email":"christian@chrisgvdev.com"},"repository":{"url":"git+https://github.com/ChrisGV04/payload-live-preview-vue.git","type":"git"},"_npmVersion":"10.8.2","description":"This is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps","directories":{},"sideEffects":false,"_nodeVersion":"20.12.2","dependencies":{"@payloadcms/live-preview":"^0.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.3","rimraf":"6.0.1","release-it":"17.6.0","typescript":"5.5.4","@types/node":"22.0.0","@types/slug":"5.0.8","changelogen":"0.5.5","@biomejs/biome":"1.8.3","@release-it/conventional-changelog":"8.0.1"},"peerDependencies":{"vue":">=3.0"},"_npmOperationalInternal":{"tmp":"tmp/payload-live-preview-vue_0.1.1_1722383275610_0.2625768436374474","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@cgvweb/payload-live-preview-vue","version":"0.1.2","author":{"url":"https://cgvweb.com","name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com"},"license":"MIT","_id":"@cgvweb/payload-live-preview-vue@0.1.2","maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"homepage":"https://github.com/ChrisGV04/payload-live-preview-vue#readme","bugs":{"url":"https://github.com/ChrisGV04/payload-live-preview-vue/issues"},"dist":{"shasum":"53315b6bde64d32e34acbaca580a4d32f07c182c","tarball":"https://registry.npmjs.org/@cgvweb/payload-live-preview-vue/-/payload-live-preview-vue-0.1.2.tgz","fileCount":5,"integrity":"sha512-abblPXbae3NLNYrCySUt6f2hse+tRLXVQEtoy8/VkPn0YyvnQQGob1P3zx5244KcWrNi5rxnOxB/6kIHUpYezQ==","signatures":[{"sig":"MEUCIQD4ReC3pS4Lipd3ySXlra+1p6W+sPBOd0VFyavOlluxzQIgOX2hhREgDN8xfUVKrEOAjQMx53fXycecjLyCBuQYHQo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5336},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"gitHead":"3f04af5a7389bcc6f55b3854566a5de3449aa21b","scripts":{"lint":"biome lint ./src","build":"rimraf dist && tsup src/index.ts --format esm --dts","release":"release-it && npm run build && npm publish"},"_npmUser":{"name":"cgvweb","email":"christian@chrisgvdev.com"},"repository":{"url":"git+https://github.com/ChrisGV04/payload-live-preview-vue.git","type":"git"},"_npmVersion":"10.8.2","description":"This is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps","directories":{},"sideEffects":false,"_nodeVersion":"20.12.2","dependencies":{"@payloadcms/live-preview":"^0.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.3","rimraf":"6.0.1","release-it":"17.6.0","typescript":"5.5.4","@types/node":"22.0.0","@types/slug":"5.0.8","changelogen":"0.5.5","@biomejs/biome":"1.8.3","@release-it/conventional-changelog":"8.0.1"},"peerDependencies":{"vue":">=3.0"},"_npmOperationalInternal":{"tmp":"tmp/payload-live-preview-vue_0.1.2_1722383428201_0.48600217958964076","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"@cgvweb/payload-live-preview-vue","version":"0.1.3","author":{"url":"https://cgvweb.com","name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com"},"license":"MIT","_id":"@cgvweb/payload-live-preview-vue@0.1.3","maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"homepage":"https://github.com/ChrisGV04/payload-live-preview-vue#readme","bugs":{"url":"https://github.com/ChrisGV04/payload-live-preview-vue/issues"},"dist":{"shasum":"988e8fa62bafeb2f019f1bd70c3f17c3e5424f67","tarball":"https://registry.npmjs.org/@cgvweb/payload-live-preview-vue/-/payload-live-preview-vue-0.1.3.tgz","fileCount":7,"integrity":"sha512-yD0L4F397pOlwNkxGMXGjloRnzYyH/59fn69UtCA/0gHY8JU/c12YAixJbfCeFIMZZhJ8pJnYht+HPlg2cWV0Q==","signatures":[{"sig":"MEQCIFaBGBCa5VKL0auSm3QSsTNFgpz3jozsvK8kHjtqDgU4AiADG4QcL1zNgf+zn6womMuXmYUwf4sA4HDJ/33DkJJYxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7686},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"c800b53e3d679b33356a2fdec498664b8c1b4f78","scripts":{"lint":"biome lint ./src","build":"rimraf dist && tsup src/index.ts --format cjs,esm --dts","release":"release-it && npm run build && npm publish"},"_npmUser":{"name":"cgvweb","email":"christian@chrisgvdev.com"},"repository":{"url":"git+https://github.com/ChrisGV04/payload-live-preview-vue.git","type":"git"},"_npmVersion":"10.8.2","description":"This is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps","directories":{},"sideEffects":false,"_nodeVersion":"20.12.2","dependencies":{"@payloadcms/live-preview":"^0.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"8.2.3","rimraf":"6.0.1","release-it":"17.6.0","typescript":"5.5.4","@types/node":"22.0.0","@types/slug":"5.0.8","changelogen":"0.5.5","@biomejs/biome":"1.8.3","@release-it/conventional-changelog":"8.0.1"},"peerDependencies":{"vue":">=3.0"},"_npmOperationalInternal":{"tmp":"tmp/payload-live-preview-vue_0.1.3_1722384970593_0.7077380547208882","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"@cgvweb/payload-live-preview-vue","version":"0.1.4","repository":{"type":"git","url":"git+https://github.com/ChrisGV04/payload-live-preview-vue.git"},"author":{"name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com","url":"https://cgvweb.com"},"license":"MIT","publishConfig":{"access":"public"},"sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.js"}},"scripts":{"build":"rimraf dist && tsup src/index.ts --format cjs,esm --dts","lint":"biome lint ./src","release":"release-it && npm run build && npm publish"},"dependencies":{"@payloadcms/live-preview":"^0.2.2"},"devDependencies":{"@biomejs/biome":"1.8.3","@release-it/conventional-changelog":"8.0.1","@types/node":"22.0.0","@types/slug":"5.0.8","changelogen":"0.5.5","release-it":"17.6.0","rimraf":"6.0.1","tsup":"8.2.3","typescript":"5.5.4"},"peerDependencies":{"vue":">=3.0"},"_id":"@cgvweb/payload-live-preview-vue@0.1.4","gitHead":"96cdfddf4a6dfa6072351117f86f561746e76bb4","description":"This is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps","bugs":{"url":"https://github.com/ChrisGV04/payload-live-preview-vue/issues"},"homepage":"https://github.com/ChrisGV04/payload-live-preview-vue#readme","_nodeVersion":"20.12.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jc96xAfcpg2tqd4aCx69h4Nu7w+70LGk35PE9p7m2RcF2v/CyenC3q5tUiw2WWigOyow73i4mFLp5m8BanT2+A==","shasum":"aeff648092a17728f350de716391b6e23d833ba1","tarball":"https://registry.npmjs.org/@cgvweb/payload-live-preview-vue/-/payload-live-preview-vue-0.1.4.tgz","fileCount":7,"unpackedSize":7666,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/ZXH6gmBls8Ma9EpHq9VhMplPkbIjn9hP/LIm316BXAiEA2scsiLW7cebnWijQrGhgeDSA7r1rdJRft5tz+0LweIc="}]},"_npmUser":{"name":"cgvweb","email":"christian@chrisgvdev.com"},"directories":{},"maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/payload-live-preview-vue_0.1.4_1722385840016_0.5414678950268264"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-02T18:35:19.664Z","modified":"2024-07-31T00:30:40.357Z","0.1.0":"2024-02-02T18:35:19.900Z","0.1.1":"2024-07-30T23:47:55.822Z","0.1.2":"2024-07-30T23:50:28.353Z","0.1.3":"2024-07-31T00:16:10.759Z","0.1.4":"2024-07-31T00:30:40.176Z"},"bugs":{"url":"https://github.com/ChrisGV04/payload-live-preview-vue/issues"},"author":{"name":"Christian Gil Villaseñor","email":"christian@chrisgvdev.com","url":"https://cgvweb.com"},"license":"MIT","homepage":"https://github.com/ChrisGV04/payload-live-preview-vue#readme","repository":{"type":"git","url":"git+https://github.com/ChrisGV04/payload-live-preview-vue.git"},"description":"This is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps","maintainers":[{"name":"cgvweb","email":"christian@chrisgvdev.com"}],"readme":"# Payload Live Preview for Vue\n\nThis is a port of the Payload CMS Live Preview hook for React into Vue 3. It allows implementing Live Preview functionality to your Vue apps\n\n## Installation\n\nAdd the plugin to your Vue 3 or Nuxt 3 app\n\n```bash\npnpm i -D @cgvweb/payload-live-preview-vue\n```\n\n## How to use\n\nInside your Vue 3 or Nuxt 3 app, you can use the `useLivePreview` composable that this package provides inside of your page `setup` function:\n\n```vue\n<script setup lang=\"ts\">\nimport type { PageData } from '~/types';\nimport { defineProps } from 'vue';\nimport { useLivePreview } from '@cgvweb/payload-live-preview-vue';\n\n// Fetch the initial data on the parent component or using async state\nconst props = defineProps<{ initialData: PageData }>();\n\nconst { data } = useLivePreview<PageData>({\n  initialData: props.initialData, // This is to prevent UI flickering while Live Preview data loads the first time\n  serverURL: 'http://localhost:3000', // Recommended: Use environment variables for the server URL\n  depth: 2, // Make sure this matches your Payload configuration\n});\n</script>\n\n<template>\n  <h1>{{ data.title }}</h1>\n</template>\n```\n\nAnother example using Nuxt 3 `useAsyncData` or `useFetch` for your page SFC:\n\n```vue\n<script setup lang=\"ts\">\nimport type { PageData } from '~/types';\nimport { useLivePreview } from '@cgvweb/payload-live-preview-vue';\n\n// Fetch the initial data from your Payload CMS API\nconst { data: initialData } = await useFetch('http://localhost:3000/api/globals/homepage');\n\n// This data will react to Live Preview changes only from the Payload Admin UI. It doesn't update your live website\nconst { data } = useLivePreview<PageData>({\n  initialData: initialData.value,\n  serverURL: 'http://localhost:3000',\n  depth: 2,\n});\n</script>\n\n<template>\n  <h1>{{ data.title }}</h1>\n</template>\n```\n","readmeFilename":"README.md"}