{"_id":"vue-slicezone","_rev":"181-1a35a2e59ab398be8c856171a32d0a0b","name":"vue-slicezone","dist-tags":{"beta":"0.0.27-beta.2","latest":"0.1.6","alpha":"0.1.7-alpha.2"},"versions":{"0.0.13":{"name":"vue-slicezone","version":"0.0.13","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.13","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"33c3cd2e47c4f0ae805693334817e74e2d306797","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.13.tgz","fileCount":6,"integrity":"sha512-sUt9gZEeFnkKrXQtHOVoyNp4PIsKRzg3/riXPE2IVjXfS4Vk16qFmtWvpJSLF6Mgw2w72JmZjQx7yrHCx6t1kA==","signatures":[{"sig":"MEQCIEdJL2xVoaagpgKibyGHR2KgQMdk3DRgnT19ZW7bqHgPAiAcoMCpymqTGGDxwaZmR44IV4mgawgzJNv5ZDxHUHNHpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSp5XCRA9TVsSAnZWagAAr30QAJ/E+/xldaTul0rvy4aV\n0EW0XwmElnfJt351AFO0LrHvN1vccvkucTPLy8R11ltWGXCGyhTRwK68ovnG\n3OmHpK1LmfRArTToSn1ZnQdb5GFuWJ94/Q+1pbLC19vhz8zySO9UT5HFfbP3\nR20h/GIu8cDF4ECiEy1ZRC02TZTBqzbcPMqeIQHh2NtTMaE6WK9WIoOK73S0\nRV//WeCyCw5GZYkSVReiU8mkg/Qyumu74hRTnDCPWrLC8cmhWHEPz6rLu2F8\n25UWDHk24q2jlK0rm8+sgt0S3JRP4IYw8+V49qstDSBO8z0YnpEXdwjaHojX\nCm4/oSU7Os0PKZL/qdvAmgS47K9qooWaroHiElZCdOZi/ByG2egGKsa1vW6e\ndsMK/E+BInofNDKu7lHJ13cpC7fvqFJ8RjUUtI90w7EW7vpHHoyHdG2A6Jwi\nke7TzrJ3bgfUBL9aAtbisDA0WSSql357myi8JEh78LZJf/c4HdaD2ujw0PTD\nsweYteP//BcPXhQ4mRxAVVjar+vBnMEyeduDZXOyWkhmOHKGHv4h/gCrJCYy\nk4SiLY1y3EIe2LD3uy9PFnGwLMiTy7FpbZEDeFJ5B/gFbiW6XkBhGZYMPJHl\nyh/+FeCBd/BBTSTi4wpcv6hFHecgiLN0wWZwE0HAT5QGlNOWOK2qtuR12yx4\nrken\r\n=/Yk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"9e71f9ef27c239d4bf993a1c368de186423613bf","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.13_1581948502647_0.2444493504874865","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.14-alpha.0":{"name":"vue-slicezone","version":"0.0.14-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.14-alpha.0","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3dc78a577a94b445b0798de3c2a1d0a799138b0d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.14-alpha.0.tgz","fileCount":6,"integrity":"sha512-9XAzyCqWlcy/NJjQ2Yr5N3KsCHYBi+yTQnJSiUa+u5/VeoVGyfRidPT9kvAuHx5wnz36Deon7de6fjEjY5JzAQ==","signatures":[{"sig":"MEUCIGFkZUAIMzFBtaKyf7j9sKoV7KGAfzDn8JD4+vsqMDU2AiEAq3U8l7BvI/ITrgkqN4HGaoteWpkQr4rH+0SVIkwlVvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSqAcCRA9TVsSAnZWagAA0w4P/32w8MWBAmzbuPJQ69JT\nXR2/JzYoheW8CRMcUNxt2tHGYSbuuQCC6ayZUFYlqp0ayBdoN2I8edhswyuJ\nZ5eabWsThlgCwnFNSuBvXIZV3lGEPtf6FCrXwt8N4sWtotMfThT6GGiU8MTZ\nA8IxwssF4wmRZDqYiPPv1XEAdqqMoTJ/kxnD4wXx7JRJMpHD42X6ju0Y180H\n2RfaIJ8ECmLVP2PPJzuI/ZhfscxgKzChvkEAX1HfSn0pTchof+C+Kq9THxj/\nQ+0TEDs2o9aM2SS/KCRZnjNWzBaY/BNvx09j4QBnQ2UPZnj9ZcLy4muNv3pW\nnsRvpyjHvkXI37EReAZQbxhzwJngrTyrcBO3VR/9L4TVc9UZqIY7mPeruz4h\nuwF43X/FgdfOC8aYO06ZcaxzebfrV5TqVssA15+aNhQAAJt3x3r+H5EnXjIE\nARIi9U24XsPuKl5OuD3IH5Ur3ri9if8qTk0qOPCNXbJjpcFaC4vHpcPr8jj4\nnxmyvEG5I8CWP06mcy33Zgpi6rlhYDwAfChomGLJVx+dntX08K5IRksMu4dh\nqxeyGNfNQSItVhB5MqkGLOIWCUKUEV9IDTO1Z90fk5rFWLFWqV/qczviBXt2\nGq+wJchMT96k2OW1in+mvhid93ot9Ztp13mfNDG5Oyy0fGp79Ka5WflE6Duq\nrbUH\r\n=XBhv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) => {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````","gitHead":"1e0b9866b1c8cec49f7ca5d49ae68c3878c9510a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.14.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.14.1","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.14-alpha.0_1581948956341_0.8054058360002796","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.14-alpha.52":{"name":"vue-slicezone","version":"0.0.14-alpha.52","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.14-alpha.52","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"94f1d67585f1c23dbc76d07ffd7f454ddf95ca5a","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.14-alpha.52.tgz","fileCount":6,"integrity":"sha512-52HSYGULTowMPdw2TGU88v0lKdCaoqtqcOvDcC8R5awboAN90emiVU0MtIE/jxxeUT9XOF/Gt8RZnGcNuN0zXw==","signatures":[{"sig":"MEYCIQCjrHYjjrRQ1lD5uW14UhHmt2btFpFN0N7OiBpHOW4oKAIhAMaQc9WICsugAQhWrCLhCJxpn2CtkRR+wpTT0wWebBUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS8fDCRA9TVsSAnZWagAACpMP/i3xrnbX5dFNhsRkRMEd\ndhtEsrB1asNUrTVyKQQCLr9By0/OiZiLD2nZDKyZ4krcfB+AfTs8gyIp+jqN\n3/Ni8OtjuHrGgn9ytLQzmZMQXCBO4vpTozRi7dRY14xBSOPU7eLP3ktCPmz5\nuNh7YBzQUYVAxq75V47dP9dbqoRZcsx9p1y4TGLb8einNzjmXt2toF64jHIG\nEKO4VBhsW6LmGN91eOEsbJLB+MHrvLn3Agl0SrMhX2IAPv1mZvStvoh7BelS\nTnFzBRbX1lPeGClT9aCnsdG6oU8/a1p71NY09iGk68/x//hDiXNV5mipcuaT\nspzgTVSqpDjkfqc1Kji88XFANrN7LEUWTFHcc79Y2q2QRBVAzb7oz1ozuJWD\nTBaGAIydBVoj9JYIU9/0/Dy2S2zqT7qEshwdc28txNcQoPC+v0boEkmINHcE\nC867bBoClDQAoHpkitPzea0mj8AQxv3sVF78vAhXYh7GENhsfsLUDsVYYPvN\n4WEVYYK+9BIY0C7g3HLK0hHNUNKpCedModecncyBOiB93pbXoVeXBWHPi9GB\nDXfIXN0HBPMYIa+Fs7ab5AXkbayvh12kM5GPTBfODJ0laXXv8/v+1gFry2H+\nz8tEU+f++o4k6oUCPTtpkqrJHwqmgtsYQiXZg6J4ETndwwAkTO78/h6DYoKL\n0Ue5\r\n=Z7lK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) => {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````","gitHead":"d1ba46bd9e46bf088748cb76900f8f3e3dd9b1a7","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.14-alpha.52_1582024642759_0.6507571962389995","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.14-alpha.53":{"name":"vue-slicezone","version":"0.0.14-alpha.53","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.14-alpha.53","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"4bf3f64b54abfd4aefb242810f8c83408884d2c1","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.14-alpha.53.tgz","fileCount":6,"integrity":"sha512-qkm8JCjPsvZpTJ6oNIxiCT/XcoyBbOempcv4dJL/QC7S9lysEqSb025NBQhzx8w8nSvaZGEczA1GGBksg1K7fw==","signatures":[{"sig":"MEUCIQDKA22UqVib+xZjmiT0gGCDBV42+RTmRX2a+6K+g+NAOQIgJXg3YbHzghP5OX1Fa+HP+IAhDN1nr2U2DdeO3mSQnx8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS/vmCRA9TVsSAnZWagAA03gP/33oxyxeJiOZw4N55Jlm\nKbJcpn9+LnZnbs84DUD35E1MYUlhYyNF1jDkwSneHkKcTUiPul2hYHSB+Xfm\n4QRVjqh9QHM3AEZlPraD2zP/JU3TvVJeEiqD25611gbsAmfSxQaU4nhXL20/\n3w/SdCEVIYYjxxleXE6gGjE+lMUEDcja6gue7/eqzHxNnKoLFyePklMVHZ/I\n+sHnnC2eCDWL/PVc2a0P083CKu1/GGoNPDnePnedHl3FJpgtc3tqgQGvmQIW\nbreVwArOs10Fp/QWbChKhznOPuPr2jPMVLoQA52jQX/Zs0lZKSHTK2xfUQNK\nVHtqCSNRWt0Lbfd+fxHIu6y51lLVmEXwpf+PCHi2WOf+j2lcQ5rWr3/FNXUP\n0lssXkbSuBbyiS8OhTb3tLHW6uEYEd8wSoL+/RTvuSfDKqLoYfqLyHACzKDc\ngSST2dI2edan5Yd8qOQz5zNKpvRnmVvKjmubCK3rb7xxICrX6z1W9AKA+gNx\nyxfeU6njp8fE3W1GsDWyLsEWvmLwTQIG3hnYDXHQ2Bn1coQ9ueKXlXMSeNwV\nyzvqjjjY/Ea8kAex1V4xJV3PueK46oYA7mglyXHu0GL9tgfL+KychGSOcaDq\n6gAReUyr3WRzExDf/8UWyDdnaB8VRBhVAEWwyZ1bElzN8onZ0nSe6CkzEphi\nVNxH\r\n=LFBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) => {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````","gitHead":"246e27389f961e4f2ca157226c29c60089c57670","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.14-alpha.53_1582037990348_0.2729813617095538","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.14-alpha.5":{"name":"vue-slicezone","version":"0.0.14-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.14-alpha.5","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"552bff987bfdfb8728d26001ef61ce2e1df131df","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.14-alpha.5.tgz","fileCount":6,"integrity":"sha512-czIjRbRjwTMMh/M5yDMMJd42sBmZkXIQn+Qq4+Sd8TteYDh94jkL+opbW/ceErAaaRIEZkRfx03rN9taYwIOJA==","signatures":[{"sig":"MEUCIFgx0w0/sGS9vpkhvGLaGFC2G05lWxl01YBhKJDQAVaKAiEA7sg/j+W2a7AyTuiuV6c8AApEWjnjbbi934+G2VRbqCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVAOqCRA9TVsSAnZWagAAUfMP/jHPF/kLK56PES66KU+d\nDGzeYbJW4c2IUNlrCiBYqolt/ga/5ow4j/9TotzcBhCJ4Z/Rh+zCxTCaOt3E\ndBJ/SpqAh1yW9YG7dlMm7tBCVRFBJ3RoJm3378dY/o7NaDPb5OXqalLZsAmn\nF1mlOBwwEgzabjhnyUXsta3ALCDczmHvvaf40MhDLvqK6aMwa6U2AJFMsDNE\na1S5tWStH01sNITs1t9KHtA25aruhTiEnH+EdttXP4TJA7OaNyinv0pXrEn2\nbu41gQA9njSuwJMUrCFMtVtTrL8HypJrXqohJsabLMym1amTnKoa/JCPso4A\nO6PWuEchHDDit+fTfOOJecHO5Yv5g8I2S80rrQCnfHLr5PjxuMzUrqamFfXf\noxZ+vNuvulLAAhX3fFZOrkf+27qcgjHScE3ujAkkw9fTwfBkNUAmyknHH6G/\n8VTZY6BTQhHG4eOMqpIbUJQp+1qgKoYmFD5Wz9iin7VI9uAAnV93uUnLXH8y\n/UMLgSMSPrd6fc6teiwfoiyaIGOUB6Q97V8QdX/lJJRLH+dbh9aXQQj1lUaE\nhB6xIJ7nASneFivKExg1C3b6fIF6rYueZaFXqzQdQr8MVX8J4pY7NLDRDSVP\nWqg9x97H7iZ70q1ai5I7Q1JgaV50N80qBJ4eA+lqHsanT0LyBmRswX5dKRNW\nYsYM\r\n=Gkhu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) => {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````","gitHead":"b02b681c4dcb9a5491a07229a3f863ac60b5e97c","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.14-alpha.5_1582564263373_0.9687102006794426","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.14":{"name":"vue-slicezone","version":"0.0.14","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.14","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"cc275303a319af4b7a14822fe861970257a4a5b2","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.14.tgz","fileCount":6,"integrity":"sha512-WokaYnFWS3lCMCY6AHSOPit+Xc2lUPbZgvyTNbKjTyFHYeUVqgZFecHlS493xZWLxNBwEKRVoK7eCMbQX4boRA==","signatures":[{"sig":"MEUCIAkVfBVx0RHh8DXl/08xXR5qmQgrPDvILJjkb4TMwkYbAiEAmrCH6lRWtv14T12OllPdNjTKseAK91GNOY3DKsVIHU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVP20CRA9TVsSAnZWagAAujkP/0x+nmRTZt2lKo4fOIBu\nibSB5BBjWxPBgZ+Q99t/W2B4WGXJKifmKhwn4RpiozpnHqfXcpgln5f1gvPV\nEi2jQzVwMiWyGZww1XkpyAg9SLpIt6rB9Vfs5G4CEL9k1zm27uadMvgDs9KQ\nC+6ka00R5GbX7r905HDAqj8uj6QMCJP6G1I1eLL6BiHV0rPQ8UYRogxXSnwD\nWozSpOhFdltATOpV69kH5xYJxw4FcJDQWprIUCGrcxBvjWemOHs67YUQyeI+\nAnNgcnPuRav0wxnS3i0iPVWyRqonY+KhBbP3jhB9zfEsJQ9gs8u3ISqXnhYj\nSGH6XGrPcSbkWxtc0tHwDm+cN+ZFIcii1OzO6azXkDJL4C7eIK0CyTlI/ga1\n7HU/U58bKixf0z8qnFE6njZbE7Bxbda3My8oiGxSaPxxRtg8IHn3lSDgG/Lw\nIqU7/8Gj+LPDI4MUP1PG3/5oyidhU8OxDwBqBIsBSFUNKFVBFmVS0Yx66Dso\n1zAtM+i39loLSk+i4BGHLmjeFJ5/SJFgKVHBU1k8FWbBR9Cxn6UWil6ka24C\nXhuMPG9cNQJrhVqc62kYcYCoEO1qWpmAa2YHxmCYjivJn9GwdJsNUxkMz2b0\nu4eGuCXrP4x4R5dUKy1dS+pDYGDZLuy+iOL14xzwBkg3EXbZbIaYPHCQcW0u\nz21p\r\n=OGNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"26f7f8f99b4dceb4d3a399d65ba793f701175d6d","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.14_1582628275992_0.2333696348426857","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.15-alpha.2":{"name":"vue-slicezone","version":"0.0.15-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.15-alpha.2","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"5e0fd111709b0cc5d98f7736f918a39270e1b598","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.15-alpha.2.tgz","fileCount":6,"integrity":"sha512-kDlty/vh6zS3tNdGjQBMfgh+94GagCdgKaWwJw2B0H1wAQ4Kug4soycTE7wWkMuaph43w1mi3E1YdjCt6tUfjw==","signatures":[{"sig":"MEUCIAywifdCzjlEHj1S/cmoJvKiYsVxqA0q6c4qo/qlnXeFAiEA5OeM2B8O+zEwgLI09JJbZiIHGEXsR2uJ12rf4zEUCnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVTwZCRA9TVsSAnZWagAAVBUP/RsbHKI+eBwZgmLRKITH\nfIRsvsmMU3drN6t+sRliMdIqqAZtXneLWkvveGTXLVYgjcvx7nqjFQlMGZuk\nTNODkqp4UpC+Hh/as77bF/P+agtDXyZvCJx8gQqUIwl2L95P8KBEoMxAIHjP\nMSx3ABM1gSVq4CuL7D5XO07jt44u4Glm1cSMukwvp0u0yEMBSuiMZeJNcuFr\n9LWChAbRGqCbzcuKHnfGfGi1PKLtAMuCgmGeH5PrggBYYvJIN15ZqpNkj+rU\nbO320Z1C7FVfHJWmCdO+X2m5OnLsnmrFfavkFKNEeWxJSfdAJgIhf4yfS0Z8\nebfeD3E+oXDiholq3LcY1aJo93edMM4rq3gmH7XeP77b1qLeOsa4JbRTULmC\n18K+o1+8uOAohJhxJrcjT9C8ebaLbxmdFlX7JH9OWkRsnw9vgX5hrOiZ3d8q\nR6vSdXzBnkpcNTtOuzRw8Pb7NnH4fmBPy9mtgGxPhjOBdHvqSxWvYAJnPo33\nanfwIEho+1hAIRlZT/3VI66dt5cPH+aoc9jKtvX7B+KNQ8Jy+pE74aVa4+o4\naoZkruSK4fNm3pLdsvrhzoG/RlXKCRpv26v1POt4aA1fkObvxs5pJk2kox9l\nvbjtE6MAh4NjdsemUCXT0WFhj8fgmgVdRdSYH5ndpHTLqZcByougFmXqYmYq\nJgqr\r\n=XOdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"93f245c7f2bf519bc26e0467a1ad189fe6878685","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.15-alpha.2_1582644248986_0.06080902298651125","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.15-alpha.3":{"name":"vue-slicezone","version":"0.0.15-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.15-alpha.3","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1254330859d374cc4e25a4bc9928154da8c56238","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.15-alpha.3.tgz","fileCount":6,"integrity":"sha512-6xcgforb4/AXchq5/UVJyn6LsdH5QmIXtbP49wLpTq6FPqFVU+hTMluaoFimC0+NV1zz1gCoGw3LeNjoU2+fJA==","signatures":[{"sig":"MEUCIGS0hiTJAAPlSh6cKqQ7JUy3AicXZ5VPcQnVC3pxVEBUAiEA2GnEM17NMibgwFTjwcCWXZkMyhedjkagdHpXedk1Bpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVktgCRA9TVsSAnZWagAAx9cQAIokWwPy/w/vy/jOmlt8\nijt9Qrm54YVFZJhJBwgI+Pi5epvEa5nuAFmc+swERyEHYr0WF6hZkSeN9ElW\nT4925EOQVt3uloOH3eALMHxrLVWGBUYnYSsR9bMJ9sa39M5EW63ZECwRQv9M\nf2fTX0L18s4lvXcYTEwqVJYU+NjBUd5Ht75AlY3/tr2Al77RHKOFFfO9sFt3\nGPQ4PGz+1c9Ffi4NIbbPMNoFqxaLbW/6B3ZipJ6Vb+xcff7TqSjB14FYbPw+\n2+Edh5h6NeMyuNj0BFRmSvYvwjXSYj9lcoVbS0ERxxAEYMVShbW7xqeoqxsZ\nliyjzxyfisRCRzRfWiUg5AX710Qm3kHwh+Sp1L9bNpupNEA3EgQSH5QVxhO/\n33lRl5aAFgGmgj5Spr8tiEnUfOyX9pwDtQR1TNaRFrTvcgjmBbfb3QMq5ACO\nGtJVRueuGpiuLvqn/aZxcZdB3GKeW6/ht4gaOEpwOhqLyFgBhJBnegmeNvSS\nOp2CIcSC943qbluOOlz6Plx6G4gLi91thQAHlNavDf6gkzc1vXXqf2ovBPjz\nQxNA63AZoI7P9q9gOTupZ0NuxnFIzs85lA9yg01MaVhC8zCXqETVFAhNJGMp\nEw6akAdk9ahjufsIyh7OSKTCUOZWWWN05A8l/T8ts6Ix4BKTat0O2jMVIk4H\npGR+\r\n=UjiI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"0efe772ff84c6efc80d2150b79e209993f7238ad","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","dependencies":{"sm-commons":"^0.0.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.15-alpha.3_1582713689456_0.5372385685001668","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.15":{"name":"vue-slicezone","version":"0.0.15","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.15","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a4e9ed0c57c927df904e809da42ea556c4707b76","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.15.tgz","fileCount":6,"integrity":"sha512-7OXF9KFejBbNQJ/GUkvb91/yrhdmkUQoGBSAVMhlMwY7p00QysljD6goJQZnDjQWnewtj4UjGP+QjiQlTd1dNg==","signatures":[{"sig":"MEUCIBea6sjxmYmjqLeAnQRtONtB+uGajnT451O1hlZAvo2BAiEA43tl7hG8WcPONMFfwl7RRr3qCJwq4ozmn3Kaws4hIUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7466,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVkwUCRA9TVsSAnZWagAAw1gP/2uWKO+RRz8JGCYzfE2t\nDi7aKucCaw9fRXH095w+cwlpLBX2Dt3m9VnYkshdxrdm1c/SlPzsuq7e5sUy\nLhfbvL4sRXttm/wMsFmD5UtYC8XDiZoj+nLr9cy3Z1dgP/sHMYeSfj1ucluc\nGHV37QR+3trI23LlxU+NTXiqbzddXOqCMXzg3cx7seLPdjzsq6mOtZCPLa+F\npynuHSjl2+ZFPkuOFfMZomG2+CySeHaKi7WX2AUvro98/tpieNgiqntQTiFc\nEYVREfB7B2euBd7yFrTSgeGJDVQ1sCKI728Xa02eRKlUxGrA9pq6fNU7LbjH\nAiqq0h/rQmRB1nnKh8oCtbqN8OTlgJeniDqjzjxO6I6BFd1ahCFqlLwY3TJk\nEiyvDPhQtsk+i2m7znvvM+dR22XpI/E2jcYqeFlvdZcgrsmxAIzrFO9XNU3u\nx5tqou6AJWzsICDW7Wo42ebKRAWhipm4LbYRgFm+ymtcMOvgMcD6ef6M7haw\np//60U2QAzmYl/ShSi6GlnIfY1yfomQ4XCvnOk7hy+2ZD1aWall3kNDacLnD\na5Ca21ZPrDXbpszhTkQcaJ46K/IN/d7Gt0PGMneDe9LDlERHlL2Wca9KVkTF\nRBhFv118zExrFmCJFIQo8fWZNgT41GQq7O42SaOENEJ7OKs92sg4pwOCdC7k\n/kK8\r\n=6KBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"c80a15a0f9fc91402147a2f707346bdec7ac7338","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"0.0.15"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.15_1582713876178_0.9242508224837536","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.16":{"name":"vue-slicezone","version":"0.0.16","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.16","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f6cba09b08e1b1450fbb5ad440977713ea35c137","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.16.tgz","fileCount":6,"integrity":"sha512-o13xTa0zqIplv+zSCH6LF3PGuTxmPJuPU5vmxm8Wj5VWL3uoc3yp9O35jv1jSOguztrkFJc8XpoOYFcicUfUdQ==","signatures":[{"sig":"MEQCIDciNvylVNSFR6msd86dU8e1N0Rduj/DOrh+zQ44+rL2AiA/yjmOQJTCmGSUEU0EJRWgrwPgAK39V2MUWqRwbgkOUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVk0iCRA9TVsSAnZWagAAxq8P/1iwKecqe8+u/NyHVwuN\nhciaN5Jt/CjqBJFrrQpzs0qdBcaE4RHrC7bzeGugTbJmAPywWPQ4vKnXLHOn\nn+UmgIsIvHhsamoUfdtrtGdIYHhxBPzw3dXM3Ijb92UI6RA1XR+02EOQn2Y6\nz+YzK7N09iePjuqa/Cca+aL1m8KBr6ByRaC/JnnWcLSNtJXZoAypaVgmitmU\nEupgGsvYo4L8o64y86Tp/RVo5PdvDuO8lG76dYQ+xIb9z4aPml3GsZIXJUKJ\nbkIJXX77+AotBl3SoCr9FZejn65dKqzzAfrjOImI+oKZpRAZmzginuP2AfP/\nyU1ljdB2/kQROh6bVdHqs+QAtoUsvQFsEsAC4n4B4V0TA9Owjzld2p5yBef4\nm7JQ8qM2KWOXf7PxdielpXurRx+mX/jerewgI4reHnkixl9uHvrtcyd9Yw/U\n9qCotwgpi8NMKIOd7WxM90Rbqa2G0n8/Kpza5mBV8FhNweqHcIdvkKD1qXwi\n3Zzz0fYygDCnuL2KUkwQ7uFC5up/mDSFUKSI2B+21WM6+VMSw/U0YOS2raYr\nGe0/qxD3uXAxQzYOuxIsSZCy1U48UP/uPurr+kb+VzQvzUVKFoYE+z+tifEG\nOdUm6y5FPF5ena3zIsWtwo511oVIAAk+Qr4s0grwGczm0uPcQqwqsTHk4P0k\n4Ap5\r\n=2VkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fecd5a65547811e24b04f6ba2e75cff6fc1eb230","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"0.0.15"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.16_1582714146394_0.1666068461146697","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.16-alpha.0":{"name":"vue-slicezone","version":"0.0.16-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.16-alpha.0","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"52c05e824fcacefa0d7cd44ad3b872574e413952","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.16-alpha.0.tgz","fileCount":6,"integrity":"sha512-ZFao13EGPMwL4h3jrpqcbqLwPTDxLv7LkwiOc1C2wbl2daGLbRrV5lEOLjdkZkIds3cE0Y/txwKD6bCgCZOYHQ==","signatures":[{"sig":"MEUCIQCvrKPg5il8kE3mAXDzHnHWmik2vNrD4qUD+jBF48bkugIgEvL2+G1jElMM2Qr14boH2VmeZSbiNFuPINKqSD3zFoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVk0mCRA9TVsSAnZWagAAWygP/1VKUvkk5dzAHgB6A1Or\n6/ah6YLIyoI17BfovPI5lqFnpmvAPXfBZ+Ej+OTjJd/T7g73nzvixF2wkuU9\nxllY6vkppNaajgJ8f0sqWlPI2GGl5HssTFQlfS1VXUg4bviHPNNyHmNrVKvf\ng5XhaVic+OWMyccAZ19S6qoTyCGuh6JJSM9kehzuWPffLSu6IkYK2oEQTFH1\noRjLk9yjbHAHsmFMinh9rMqGONTCFDdfAk1WPM5UvXbebQYhenVun6yzHtz4\n+fnFRmKwsQRKfta09sD20qI+bhHnVvjqhivHcrbTSnA8IC9bxLyIC4CY2Bm9\nTnUF70c4kgcNgnbw9KKFv302S47iqSSq9fFr+cE/wKiN2qEAbfPLrubbR8iB\nZsQph/hTV2ftWqnUzoKW8IjUw/7os7BG2n5MIgRNi+pfGzknvo/LPBPpEVKJ\nyIAEJZfVoOzwNFyGGDzAIxptYfPVvZ4lmG+zUWqdZTcS0k4yTmM7hiqKQUOK\nwz+f/sOLuJR12RgDSyghJ3jkxVpuHUTRlT7NU+1qiql0BBAHZIAtuCvBGz+i\nwExx2uiLPPAVuwxV2wM8Zd+a/WsiPGnHRYsQsMYNc+E3e3gNHZ6thA2dx/E0\nvvtZFLSGndsfeF/q62nAj9qni0iS0JBJQygr62O91FJ6D0Vuuabu4ChPjJ3s\nBLvt\r\n=XzZG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"a18519844e9835fa4051feab6b1ea4c0cedbae9a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.0","dependencies":{"sm-commons":"^0.0.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.16-alpha.0_1582714150090_0.28501717232302304","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.17":{"name":"vue-slicezone","version":"0.0.17","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.17","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"113d6c9b59447b02a575dfdee21d2b3e0ee45f4c","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.17.tgz","fileCount":7,"integrity":"sha512-4P1AsIWccBpjEjcMkepYrP894/k/IrC6iMf5VNrxcad673o/A4MDwcmAYz3eOx6BDs6/W90/+E/hPYD86Wds0g==","signatures":[{"sig":"MEYCIQD93A4u3OhDAqDjRHEdAe2DCz4EN4qfg+wfHmoVAK0i7AIhAJWyrq9FnQK6McwU+dcgW3o7PrKGi/mw7upt71oLwhbK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX8SkCRA9TVsSAnZWagAANNEP/3Q4FP37yyP11jbpku78\n29oZPrlEs7ATXHFCrvv2hh9vtBNcwRUyEHaDCnfizamZOTXC91Q6hbYyHvk1\nj4km1VOrKXX/h5XQAdBkx4RswOeuZcjDzTxkBEvDcLk6dBNe3GQcpBTGpAQS\n9Cxuxsx35+0zsFUZe+gqnfXZ0R+JqyRsOUa1jNH17O7Eyd1X2D+vJLSuhF3A\nLNm5hL9B5iDf+akwfLCfCQG2H3DBXpvt26RDevb+rxyw5jRaOMeNMwvGQyZC\n3qsWf1rR9WgANACNpyiULstA4T1Y98YC3Lp4MI/q4JA0TvfRL+jJblRXL5ow\ntLp/zfe/pDGiAELlmcBSLyu4We1qt8t8BQye7WGeONTSA3HlrqoM6b/OAyXU\nxZ1G9HeNccEkryWxXk5/+WKVz9PXA48EMmTimdhy8XrnqxuRE5TfmF6Vg4X9\nWQRDkEHIs+yKoF8oPG6UCLJpRvoRVcazOaCNze2+mAR6vwtS5pHmQclVhkSp\nTzqJmfO09MwrXkvN7ocu9faUxU2AyqfpBuLWUR1DdSjYEXoRNCOJSZeeZruD\n1E+N2xEFUb9O86bAa45J9iDPnNjSlFgHOMW36ExSMCL3sl4IVQuZy+qfYcIc\n6B5nYugHoNbZLOE+zMNs6BUHnCY+4oPoSMwD6zq/BZLzCjQsaiB5/VJWmALw\nddHT\r\n=WgaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"7e2cd6fd4b6b18775994abd005ee14b795f4fc25","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"0.0.15"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.17_1583334564291_0.4178097009122015","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.17-alpha.1":{"name":"vue-slicezone","version":"0.0.17-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.17-alpha.1","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"99649aae6a0617fcc42a2019f9fd13d12c933aed","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.17-alpha.1.tgz","fileCount":7,"integrity":"sha512-I1Nmz9SaI9xjz+uLfFiXSH2ILGe5edPs1z3CGR6606SM/rcecooBWHA138wcEKfmjQ6Oj3PeF6rjocIh5wIDcQ==","signatures":[{"sig":"MEUCIC+C2OAOpuw2Matv2v18i3FwVkl7YkXalmoQTWvJdQVeAiEAhej35FrXC3uFZj4VziPOuarSxOwLUlQOL3RL3N8OHqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX8SyCRA9TVsSAnZWagAAEesP/jIaYBpco4zTZ495mwug\nEXBYw9l6H59KDxEltWur8vJ4Pynt3JPwfU/YtdH8qH2Kqw0tl/N/+AHBRxVL\nru/NyMi7r+KTf/Z/uPxhdJJ3W5XpER9zWszDprdA8qrke7GH2z1zE8WJAL4W\n1ftyUQfCjDPYxahdlFwqfpEYUw4EAB54QExSpEYRvR36ClBFjPSFQvQSrvI+\niqkS8d4Virwiu5ZDZh4wMkip6Z4ZrJO+iXrWbwfaAziXU+kukq0I7Hu1CeWR\nE3rcd6zG19rZQ0t9mW4oqE3fRtyGshhLUVcRkObDfUqhcLt6SmEjLBbHucxa\njqCdhk0xGxlVQaeeRL4+Md5RJuZ5ZVVyFwZ91+0dqhqTKvwENUZHL0znVj41\n6jweokZFw4ZrCDD+VIxiES8O8WpumqyMDQFGhfQROwIo+TKAqQkV8ibEZmMa\nzlE5AOOAP1FTUeB3um/G9chwhOqboIXL3bDbJlfyJwZIuDYGQUQ48OI58kka\nMda9g4e0ryxKK5PQqR5kr9jfAFCuASzf2C+8EubhBYECZPl9KZrZgff00iQR\n/Vw5d51uEXS+ixEL9cts4KyIbFya8lOkvV19VZX/kFyUxZ2/G86xR2GN/BI2\n6FM5DOjD+GMvLB+cH4DJSdvke7LSYNZsenRQWNKmLC0Fy+Vf3FKPqGgDsvVf\nUtnl\r\n=+dSZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"e5e5baca970947ff1fac97844544b1955a3c873d","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.1","dependencies":{"sm-commons":"^0.0.15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.17-alpha.1_1583334577923_0.44419168944977594","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.18":{"name":"vue-slicezone","version":"0.0.18","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.18","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"da8c02c02df4fdc88a085710e06442efc02f63fb","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.18.tgz","fileCount":9,"integrity":"sha512-D7v/P+A05SKkodyhP8dz4IGcD2mdo53TPecE5nf1DpE0kosg9WLLKw+xddhanXc+WFl2yNSVvBd1SrbD5NQiBw==","signatures":[{"sig":"MEUCIQD//H7/+K4Wz4KqfHlo+hq/Z80tDUq6srMwKOoS6AYctAIgG1/KNishpPRn5chZSU5OGdEdj+7VLPbvREuQGfOMaGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemYGTCRA9TVsSAnZWagAAwtkQAIg/Fy5vFxP2TTw9TdXx\nEGBcNeyoPYGUSCEptA0/J02MOe9INaddoVlK6HGYD62Jcb66Ibb1C3UoM7SE\nbt6wFJxUR8H1wsICKny+BilH7Vgof2hYpV8xDQ/J+I5Npb7IKfe4wgybo/2O\ns0c39gjpIPPadNh00pyYh5DIL/HOM64WNi4L3d8XDAW8wqWTRjsKiI7HviMt\nU6A11dkH9PX7bAB4y8uJNE6kiT7+Thfwb6B9YSYJyqD8Cm8Lf6SKVC3u5/WE\nICQ4w6e3s9GJQWQdIwf/8YSP7ozec7EHWQ3gnF6IlB4EbJyCP52VNMre8RiJ\naaDvF/YCvuTjui1Ud6yQdXbi1RLX/tEXqBwCWCMLEx/+LfMu9vY76/d4CKxd\nF2IJLB5Aphq9ZIiw5ZqggRYSc2ozUuBr/duvG1hec34MPvoCu3r0/PyNxyBq\ndI7lzmLYiCUr9KHP6L1VTpqxsBl5u97HFyihvMUQVYhO/xwdfhKFhHB92PgI\nlJ7b5JoYy1DzEfzny/xBmL19OnDCMXhw42Ud0LKIjtwKQa9koX/aF4R8skUc\na+lOHg71T9TbSYlBME5B0HEQ7ZAtC3RmQ/Z0F0s0VPVxLcWhUI7Ca7cTFRLR\n+EUCD7eOGrq8nInpLQC8Npr+sKOxn6g3nORHYkBsDoAfhB9MpAFlxnNRAbwz\niqv8\r\n=jLU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"26f72a123324701538bf1619a2d723ff1215eb03","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"0.0.15"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.18_1587118483198_0.618663975852273","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.19":{"name":"vue-slicezone","version":"0.0.19","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.19","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3840306a29205979bd8a46831932b871e59e52aa","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.19.tgz","fileCount":9,"integrity":"sha512-QF/95P6tePbWZ5amIIA00LrzGZo2E5b4HqeaIL/7H/G+Lkg07/B1xg2aufzcSJnUODSIqfOM4Bi9Bj8jBADjEQ==","signatures":[{"sig":"MEYCIQCAA0+S8SuIb9MWfSNZwkLpe/uVLnRXn/t7WNInUTBuAAIhAJQH3b5jGsMKlHKDQGFUdrssBGfkTV3wweOzlLH2OBEE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJema5yCRA9TVsSAnZWagAAs44P/jwwF2MtcJo39BRgQp1W\nGbAYbQqQzD0cXOCal0E6+oTmGO9fxAnisAzM5PYfX2auzGPjm8lMls+7LuJF\nxcmTbBYepY4Kz9XTDgtSxz7cEv25isVzkmuwzrb6jC4E6ted6YfHmTKVL145\nSHKS194qYTy2K23o9r6yNItmuJIXNXsrFcGIVLNqRql0/cIlOphSFNvxUSj3\nkYoQ2R7pUdiD/oIVz4ogUXFTXr7emFjn/TDHoDNeGAowTxHC3rA0ziC4Y0oI\nuo22TBCxmGuJ2DIWaXdUbb4ue/Or5V4XjsFsNx3tUdDrwFZPfBPiWYDmA8uX\nI9uD/cJb/Kg2pwaWEkI90N0FNgOIj2G0YUuYHpkcUrFz13iQpd3lOjO1fMDp\njvn7HTyW5z1sQqrC2QkTaVC8wM3XGQ+IP3BisDrF1BUTd4ztn6+IrSvkzyRb\nW57oF2mhSwkxRFewbEtBP5bz+zSKii7Dnf+6PQhaD9+zy4dMeqTKJjx/h886\nW3YGMrTzrGxTozE9Jfjo0Zv35OOqSEZCqAx4i2QxUlODO69D8w+xtGLg3Qkr\n3LFZoHWbBYqCwGXQVUBfQ3QxcoodS0T/7PD2TL3SS53qwpaL2Sv/vuVKsJiy\nCsfdDlxk8em8wvQgAqqLSlG+biky8UAaMM9o89MlVLLKjjXiI+IPtGgq1UJh\npUMB\r\n=DmOh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"b33bf0be908f0eae6c2993bfa3e8a39f905dcf09","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"^0.0.16"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.19_1587129969868_0.9672717051651052","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.20":{"name":"vue-slicezone","version":"0.0.20","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.20","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f078ed1c7ace9e096db92be1267bba51072b9e5b","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.20.tgz","fileCount":9,"integrity":"sha512-uWmu19In3nLN2pwD36DyqCh1tAc+mKSJ6QO9A3NTX88E9pn4fSwYU5c8b4XHMFpRkMimLi2tVnAJxRY/xxlYmQ==","signatures":[{"sig":"MEUCIQDOXD8KZe0Zra4OVfhca+yP8V/8q/kpoPrkhWoycKVObAIgFPPLwNVa5M9RiMd9wJJN8IIerOwhleS5zhZBRtnjQWo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJembORCRA9TVsSAnZWagAAibgP/i9iLviZZHNk+auXXUy1\nuH0XXL9PyX4grx/eSH6gmufXrzge5BV9TVz7GfZUaQNtBpkADd4cqcy1o6+9\n1se0Ow29LN8a2GWo4cXsZybuY3PLG3rCCyo9R/RBf7Gd3DQ60xFq2kwCxM7l\nw0gMF1ZrD5KhjyZ7D2e7zSaG8wrSB7oDab9vRrHuafFt+D/UTgJ/ufFPuX4n\nXIYnjYv8UwSxO0JeJzWyTzfO0ePa5Ll6SE1t6NlhxkbniT8UOmG7JJDLVjMh\n+Gs8YrRQo9tONBoqiL9EgbASaInADkkDQcMkd/SvOREXnoCnJS9fpUYuSYDM\nfBVkj+ObXiVplBKd08YOWQkNi2wu/uieSekjcBIcd5+fbdizSnCYNinlDaDW\no3WsagP9ERe6Q7+UugNys1oSKJ0U7HP7UrBoRGJWG8EYL18Z0sI0VaNQwLY6\nK+OYX15gzdRbEmUrs9lnjHNTUEd4XlSwGlOmdv4124Sj+DJGW60Zrgbcb1ic\nGADAz8UFF4oO/RicrlaEC2q2hAk8bQuUkNSyrdxiKQHov8VduSOE+2nlySoG\n1ZNSZSEn3JPeZKCzpQR4zJrHcKQa6iVlVQPzm0XsQ63Sew+xton5f3sIs4SM\nfK19HjcAzTTbVmuJFP0fy/OqYJqPmI3uPTqucWHTOZKgU0LPXlY3v52Z4pvr\nFPvw\r\n=8eHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"58f9c3a4bd3fc23cf5270639829bfebeaa23bdd4","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.4","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"^0.0.16"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.20_1587131280651_0.9700322905018781","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.21":{"name":"vue-slicezone","version":"0.0.21","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.21","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"2bc740333bdc62d6a5298a5c93a2e16c52c5382f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.21.tgz","fileCount":9,"integrity":"sha512-7h78f7ApYZn7OVVPcb2YAAh7bCe3rPaEdsBLteTeujWI26TBJ+erSoqR2zEzX3rt8RXXKSYjoMiaYmlk/ooOpg==","signatures":[{"sig":"MEQCIGaHgsc9jeyWNLC02IgXR0VMB7HfXkXI+6rPz/wf+A46AiBp5XCQufvgr8qteZHc89ZFb3jYgibNC64AzQLA9xsdLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemcnQCRA9TVsSAnZWagAA8iUP/3yVMpAcJ4zpHy6gCKSg\nabqK3vfLwH4LgwC6F6tRP/T5lhQre0xUlWMBkXCvDS30Vxlm25AK3gQoU83W\nBdnVi1XJI0giDkXJT9G69jJIEuajrko9MU2vqMXRy8HnpFNuFdSo4v/4mgcG\nvtjv4o1E0gTx/3nOFDyTIf+gw0H9GETyFyXTAEMPT8PfwNOPtvpQpWFaUVDC\nREB22UvFTodzt1iVceSros/vF63ZCMjSp03mwb5siHUsv0ZxuuI55XvCFsxh\npV0kNqu7WZjqEpReukVwriiaQwLbxPgOOG7YSx+1FEJ4jxg9QdLk5sQMIXaM\nWQMNQ4u2r4M42gyaI+QhH6fOUszsOXyfJaD6bDS0srNTjgcv0Zy8B0RfGkw9\nB08cIJQfqif8W/Ov80+gCb/gzX3AS3EnF8tOKpB8HlKSH1DetACUtZL8oy7R\nXmLlNPK/IDPdxeDqkVxKmMNx7435oI6O3Jzuddk9vqKXjcNl4RNmuP+QUfqP\n1CVK1lxfzPhaPyNkRuyt6AGgU9/e//vOw7HIIhR7pNVewLOILsGys18aRDDR\nb3nNf0iIzinGg9lcqo3t7biA2kwXdUehw5wAgCmcNKxAhDY8Ia+HEVdv5pyo\nEkL2GSjciDgiGByP4qMimiORzyEC3J5uLLm4jg/QMPdETjr6aykkKAG8Is0Z\nkUdA\r\n=qeZ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"58f9c3a4bd3fc23cf5270639829bfebeaa23bdd4","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.4","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","dependencies":{"sm-commons":"^0.0.16"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.21_1587136976397_0.31088265091627765","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.20-alpha.2":{"name":"vue-slicezone","version":"0.0.20-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.20-alpha.2","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"950e850b68a2398953299ce906d2728f28e0a787","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.20-alpha.2.tgz","fileCount":9,"integrity":"sha512-/2Gur1a6x5JjgBw7DVI2+iMTzwgf24OQ7OwWJx/ziDQ3SOQZTeTmKxEiPf2Y4SZLVIMv/CSv9w5dy9TKhyw8QQ==","signatures":[{"sig":"MEUCIQD/pG6+rZZET5lAYS5+KKmth2llzrUTFxChGeFPAefJ5QIgaHqtkLzwUZs88gfKfEn1NULe8SJsIUu3JupDvCjrEJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqYKoCRA9TVsSAnZWagAAr3cP/2FAFk9Tbo7et7DyRK/+\nhZNtRtb+lMmRPZOrAu6QBHUGr1tjD9CvtS3A/1uE4T0xJlx2kHwQYBht3TEI\nsycIo6o05EwaQ3wAsXxBY8Giv1S7lPuno264Kyf5jTLy3hrvp++3Ax7j3Nw5\nkfRl6bVR/Cjg3p+xbWuYKi6PYDbnLYZjYiScj2O3gnTSbdEVzWwJS5wPYN7k\nbARW1vDHWOFeuxFUSTvy5YRKBPVPWOMKg1xRgMeuPTHfe5G7WLj1TwdDVqbX\nMFLkLN5K71x/GVAdcjsE/CJDrJDYugceMr+1ORGVzmLxaojH1coPOqssyyHY\nzN8bcnyhVVB/ukr4xeOMlli4iUxczZOWwjI03oTYQoY2+H3t6eDnFUzeLaBg\nlZVo/jxw1U9AtrQCMf3BOG3NYMencIXJ05vgG2OIoPkNcL5E3sjEksuT3fWk\nUREUsj8ca2znkJlDC7CJJyefsd/unH8X1beZ/ufnaiXB97SK74b9gT5ZFtf/\nwBsRoR32ES8Rh2/8xjvsEn0nYNsITyf8EuQiM5DhclnG5kz+Ij2Rp/g4QE/4\n1P8tKQcjiSw6l0sMygtrPWZSvivYx1SWDJtwdO2YxvaPxNL3KiBTtvd55S+A\nW7By+HfJPi3O1pxljbYrFCZqaHR1+3x31VszQuaKuur+ZudWbJ3q4mBD7TrJ\nGAev\r\n=SWOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"2827dbcccccd860c11795c2489e977b604f84df8","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.1","dependencies":{"sm-commons":"^0.0.17-alpha.2+2827dbc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.20-alpha.2_1588167336220_0.31048829482994145","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.22":{"name":"vue-slicezone","version":"0.0.22","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.22","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"be6f6c4f362b260c42d4e6a1c7fbbde3ab914c7d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.22.tgz","fileCount":9,"integrity":"sha512-3Z+G/ugLH7iRFNIPrsC+r1rWVnlnk+jhKfqZMOlH6p6VCmOSqpVv3RgbE7z3WBbO9pjKWLHkb7jABoYHrMU0Zw==","signatures":[{"sig":"MEQCIQCUmJh6dQ5pYNOG/mMo0VeteDZZvJzDTadpQlEUsCs8IwIfY0W/Fs4RdQi8tgKyip5kr0oOvaKdte+QFjwyR13aZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqaDmCRA9TVsSAnZWagAAVKYQAKCpmii/Lh+gyXPpEyU7\nBPBtiWxkzkFYJDvK7O1DkvAC+ugVWTIrjnZen3KqkpJ+iMirBDUb0TwAOApH\nekW5M6GactZ7lv9bgXYipfkQHVXdJ4S1AAd0n/L5QVNH+0DNzTb5oDfeJGBY\nBs398c26+yQzlhyHzmZ91utCfhbnNMroIx0Jeso2lSe7AW2/5DQItC8LMM/L\nKTAhi31pozNrT8KxxnH6ffUPr6bh/+mi4fAlfGN7NDMmWe0khaKCGx1PrRPC\nYe3/t5VLotm7aOMO9Gf5m6Rh6stmvqRfp5z8eNBGBG4n/Yzhn6MqNnacXi3k\nb4pXEn6DScTkbCTkSsJthZnuUS34DrEZJmHJEW8r/zfQtKGgvCQKHRz3DP9s\nyvHlegvb6T6LHVdgNpNeTxJRa++hwMlyFHn2w/0cBGCqVakyDaCjccZTQgDX\nqYNxJr/pvYUIrvAWss4VLtHjCyMBVcMb9gEgRELR+JAaLI3mrise19MQFUH8\n5N4MEEU1AwVv0ZVwlsSVYmBc4Lke56ZmKLkGfChaFcfHNl6JZdbGib9jlQ9E\ni5e7z1roiBRMURE1xhYLyIrnBvb5cSnfLfOBdRqV4uH8axQLjz08tldQM9wA\nI3mmmf5d8xQ3rMPOpEH7axl0+eqOKj2DTV+0EF3gbKfO8s/gG/YNuxawr0oo\niEtb\r\n=hhVy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"094aa2b808cf5ad700abfb8f41adb8328bb82357","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.22_1588175078336_0.6343614503688686","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.23":{"name":"vue-slicezone","version":"0.0.23","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.23","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"6fd1732475dfbde8e1d8bb5fe09cdeae9e9b9a90","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.23.tgz","fileCount":10,"integrity":"sha512-cn8xnbmgLorG8DXJs6WnwkPunhG/9cCy/BTr3X69pZU8MmeLhOfcmMZqG2X8Rn48i7NF3w5MFmi8tdbx/j1+8g==","signatures":[{"sig":"MEYCIQC98g8NyNUMojkJr4hycUyPxcBkpyt6XHqGs/Hi9osn+wIhAJ/m/9jqxeub25sXar3bnj77U2uCrRKqR6815O26odHN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesYzaCRA9TVsSAnZWagAATsoP/3dVRFnKireBinbTzymB\nNSGnV1Z4Th6sJ6jqZYjwEdAChGgUdw/vryQApMGOhV3S/eJY673QsqK2vNVx\ntC0yhBpiVFRFM1VV885ropou+hZx3MyPPDUOSyfTcFJrFLd09SQiDpQT6nQL\nO/11iQrUShA/UQkRCjojyhrL6WrOHpGDt+TVjrWvazzjREC949kfNiDey/jD\nxEMGrp4Q4xoTcABxYV7X4IXMa1Z2+Hrl2t5tHcE7byKu/A3fRf4FFgNArysZ\nZB+VuZq9OHVIWp6n2BT/Hq6sbYNcNnFcFJXfq33/o+ETHOYDJl5wObLdh7xm\nscgY55oeS/sIYafLjhSL5CcmSbFApo9u0WS6AzZ1B+n0QxgozBFl5fuJ6MjI\nHzp8LArQno8/mK7oZjMRv6wvPB9OjfahZXAgQb/xRv6ezreFGTFAe29zbtsX\nTic0pDKroErRT5IDZoXjyGMZbG9Ebwni5/BgSe8+YS/XobZTNK0AiM4lDFH+\nk16qSsTEHZpGj59lWtwrnExQkeTsuoEZDXUEZhqnLwgGTms/CuMzHpOe1sys\n8reyVpfQ4UFgL9ny9wiU5VEuK+lkprswV65sn2RkHYRkZmk8ZVlpZhVoAgny\nUDt/bwYEobxzH8O7jKbcpw4IXZCsVy+PJhDT9KugPQUbQt3UheytjTSRz0ND\n2gMB\r\n=pDQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"7fc247c38ccb46ea6d3ef3742f1b81dccd84d91a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.23_1588694233484_0.8217958575467696","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.24":{"name":"vue-slicezone","version":"0.0.24","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.24","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"c9489d793725497a560d11d1ee9412c9dd2c4960","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.24.tgz","fileCount":11,"integrity":"sha512-yC0haTQOXHRY8eQwGrPUnAH2YKT2aCp3Qdhs8onYb04tjQt72qIN7XU+rQ0EnSlMbIJSZxKDaTIrvI4rK9+42A==","signatures":[{"sig":"MEYCIQD/ypUt/LI4kt8FluXs7xYmsIyQyKTx14t6ZW/zeSQhowIhAO0ei3sbvQVhmbb616eu/qa0lN/Ii993CRAvKZBkWfCt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexSHBCRA9TVsSAnZWagAAqtEP/Rgd4FcqalbYb1UKCzTC\n5s8C1BREmMqylH84k79nVTBovjPpMZsSBnTykbqhR/DTpC+HUh+5IHfAxr4/\nEjwj+rfvaVduhSRdAIkKRq+alziEyfzghJDr9Jca/wlwl2waYLxBD2U0HZON\n80ssBDENNKUuBOU+TmnAf8iA2h9PhIukYZuqCFMila8nNApU+4GOLQKfUq4V\nmSkXqtIdDCQnaoJHi8HvtOTxwCqzTxJVVoiBVVJhcrrzz12Giioy1tG6MpEP\nvm1S0Y1ptLxPet4tbk+nPu+cwr8Hj+FT4iPKtkii0w4eU8K6TmHEU+kcqWYr\nyUsSyZEPjltqLFy4eHn+dWoF5q51gsCMcLSt0z/nBEo5nu9rV6GOZFkB0qY3\nDM2o2WTgwvn6nPvRRXVfE6DTRgXWgcGEonDkR8vxISEwdXoMnr9CN4JvRHD1\nkxCy56gHLjWbf+G4wzwz1J+dDxuuPpkLRGUpF6sWSbp6f3jsZX14PtjJdQv0\nsll51vS2gZv7wiKiL7zhgDl9a5ITaj/NGHOH64jmFj6sifPIST41NW57T9mW\nV0P1+bMe41Pfieic+KsojdnG1da5jxgCn36JEUFmhJws4t8caDTdJEiXRkI+\nrrnQ1u49lrEL7i93iHi9C5O+XvuuhCBxNKak58jVIyLe4QbY0fdJSpNRqA31\n5NtY\r\n=/clu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"58f9c3a4bd3fc23cf5270639829bfebeaa23bdd4","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.4","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.24_1589977536980_0.3267247152149402","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.24-alpha.5":{"name":"vue-slicezone","version":"0.0.24-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.24-alpha.5","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7c206b7d0b7f5046f5f905ff599d4e66f0bc531f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.24-alpha.5.tgz","fileCount":11,"integrity":"sha512-LGH2P2lRF/kGnqdBetEX0Tpui5HnTnaRM3n8QynykHvb0DbyigwiSxuwdxXdvkHkqlsqJ3GfMHIlRAX9wVA3xQ==","signatures":[{"sig":"MEQCIFbZikamzVyb+P+LGp1RSePBp3OH0ONpFbJsfa6HVIChAiApBOnFPY82T8q8ReN9ldT/BxopaSsuQOYWoqcQ2CeOWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexSHlCRA9TVsSAnZWagAA70oP/RoC2DyT/m7s0gMTTTEP\nQ+7abMc7wjae9xbnDPP2QRYyjbaTkhSOjh2BY7MYM4YbuDUo3s0i7D/YpPXl\nX7LLZ/fbW7qAYzOL2abO5kSWLHo8tD6a/bSpIX3fJwF59p0GC9nHRXAU2+0E\nPc1shdQHrSmeJ0enqcDHVHtM6zfq+fnN19BnQb792WpAgJcFmAeXDAXtof2f\nDNxE3iBpPn+AB/ZYRonFBH3s87lzIfeXGn1H672B7WsH3B8u0oQTv5uHulba\nFLBi1iK4nnojRPxJMlGqo4fOUcS1OWs5e/TCMCW95Lwaaa+mjE+0sBqglfbr\n5TnQ/opMPerwRpXUO120dFa2LFy9G6MNMESxVLJCmWV+endceOfIVn1qVLfn\nq4pxYqS98qF1OVNf7qLY8/ry9AUQ7xxkct07PAszHq8cP+GCO4Qb3iVWvtNH\nyiDSJNN47xwyeioXDwWsreTwudwyY9oSvQ7aO+8hsPKAlqDOivb2fzVCht1z\nBgMOTQWdxRLIBCQJH05WnwsWOGAIc318hoguPx5ETrCEy5MOjA8hCt2qLTPm\nwxUIByQ8Yer5WDE+68GHKhPzlg8Z2Q3sSvuu9UVtVexgF2nk6mPoWLyJR0yv\nXoJLeHTgpyxDzCbBizegVM/pg83AGLVpOOuJueiry/+jMy1/BR2XXgUOcXVa\nsmIP\r\n=9c39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"4d451b8a5bbb19bac6127da00b6514f16c8f2467","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.21.0/node@v12.16.3+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.24-alpha.5_1589977573246_0.8411723789337036","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.25":{"name":"vue-slicezone","version":"0.0.25","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.25","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"cc1514ccef965072343bb29e7d00f5b6e36778a9","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.25.tgz","fileCount":11,"integrity":"sha512-aqFfpXtLZna1WI1GYM5eGn2DSd0wvlOTjtqp+FCZmY729LuSJmvxGbqzBmDxIGFgP2lrexKKLImyxd+YWIr+oA==","signatures":[{"sig":"MEYCIQDpN5YLmYieVOMxYMz1FKAJkPezSChp2lSmmS+BHnlHoQIhALc97zlupAxg3svelElBrXnR1u06movqPYEDuZpbMUkz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey9A7CRA9TVsSAnZWagAAKqUP/RtVSQikviL0WqeTNgTf\npH7r/PCXff2ii0TwosygS7+SOIm3gFpectr9IQsbjIBmDoD8abY0Mp8sUMMG\nbDxBNt/0dVa4K06FTRzDW8gzyy2YVWLRMoBtr7W1gFkM3/gCcI3Eg8FpLIbW\n8RYOZc0OfSbcy2oBeUbOPrGAAWg80PxV0t0X1TT67+ieZC6cdXC3xLoHl149\nz+mEXI1ROSuM1M/MVoKynIBJEUIrzJsgcqBKGDuTmI9DI5VSwsI3/3XNFthF\nQcFO6RMH0ABhNWcKwTplxdcuqCUb2zehTUZUglLWiaw7Fv8YapHnsBVOvi6F\n3fcUW+2a3By8QdcpBuFlqik8lZQr3iv8KC0hu+RmIeS8TZccBfq99h0G7It1\naVLUBGAx07EbrxT6jc6m+zXkvMFwM2lzZgApwFymfOp3IJlNcaAo7D8zDYwT\nh3z3OuD1KnKis5zuPytNfs573sI36vh8E1myHP4F1ar1Wqm4yHAcIJQSy4yB\ns+WG1Bo9BQaZfIhJbNqshdvlr10p++V6m7OoX8NHPvz85mdofhSytEN3jFyr\nqIh6IO0Ky2g8+zGU5kI/SDtDD1O3rsWeFpLfGbDnBAqSnsFHcnePntSydQwV\nFD4acOMOseuCdo70iGBNSiQmDCe1At7b+ylyopaOONuXtFe0ndxbvyJcFX/a\nOfJ3\r\n=Yt6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"1d85438e82e9896cda1db5ecc73fbf6a2432279d","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.25_1590415419137_0.046721027280279825","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.24-alpha.6":{"name":"vue-slicezone","version":"0.0.24-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.24-alpha.6","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"80621d2e4ac240ad2de88838def279117a96e84b","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.24-alpha.6.tgz","fileCount":11,"integrity":"sha512-M3BuSkipEO4J4LpEGd9pIsQKLDqOzC9oGBcqdtMoPYaQGqF9oGz38JBXwMj79MUdOkbbJSOZ0td5v7k0P6nBYQ==","signatures":[{"sig":"MEUCIQCOGm751OPQLCPXUGOg5OYnYhTE9CI85tVnnsVZoH8rEAIgA8Vrm+Um2c8yvVsvjzEXFgndfAJCbRcbK8XKnAuLQQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey9BICRA9TVsSAnZWagAAVmIP/0S1/hkuy2Kq1JuEG3si\nGhx3NBM3PmZAe7qIIicdebP0DfMQ8nWKPU3mGaEBSkrrA0fv6NNac0zuqCWN\njgTNESU4aOytK/SnEllGezqWQsdJdhY9SscnSLOErdHjzuLtHNo5zKUgv5u5\nhnSQ1J3k7KY/2OMUiEOCn0bElIz/7kPkNZGWABcKSHqJGNeK961ASOhCpPNt\nZae/5HR3K9Eo3iuc9RT4Qs6OQQDRdgzMOjXJGQo1vozd1cTB1X8BGGCfmlTe\n01/V6oa6IPHYEu/HuzRmfMJOwToo8M8uJzWHL9r7haEo2/1yX3Jubd6SfXfh\ngh8b1cm+QaOTXWk0oWj6NxdzhUraCLBXzPoqVw6efVsihB/gMhxUfrzOMvRA\nk3ukRLUIYIGShw91uxuoF5bp0st4xjwJlaAaTW6HI8oLV64z/Qc+ifigySGc\nipxJZbxcH++hMmU5mNDfv17El85FewsKiqDwkMVMYKPnwlNbzOS8rerGtWKp\nbV75i/s2Mh8XgpssFTmuliStwrrE+vxSEbY+TVoI6IAiL13cwXB7vihncT0y\nKNXNSqHabem8YR9VJAFUeRFkyRTS4XGah3cNC4DMuaLArIs4bFxHeeKDIDWn\n9TeveyOrPapBqAAzDzaD3vu1IAkPUqaAyBQYeQydbF0bPqChk91ZmLFjKjUd\nbpG9\r\n=wXtm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"a399085dd05f79ce4c7dd820868a5f5c76c0260a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.0/node@v12.16.3+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.24-alpha.6_1590415432244_0.7550084438019922","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.26-alpha.0":{"name":"vue-slicezone","version":"0.0.26-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.26-alpha.0","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"beb7dd33650c41d5587cf1c447e48a784e5fca6d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.26-alpha.0.tgz","fileCount":11,"integrity":"sha512-RPp3wWSX743ulCWSrofLZ8rgE7u5Vt5JwcDjxXmLeatcaXZeEHFkgkUq3nVG+oKsJqNyN63Zw/flKP4Z7xptwQ==","signatures":[{"sig":"MEQCIGf0SCFQ/jUiZaakSJ3aIy0dgZyPifx8Mf8Tw7wKGuH7AiAv5NhfJYAinihN3bEAXSUFQ/9PRobvSmbRsG4YDc+htA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezShrCRA9TVsSAnZWagAAT+EP/0ielF358CzgWAQNurzg\nwWnU+GFZPqq7i+Di4Jy8+nLVoGwKnat28gSL9ikK42quloGwrA85PETSpBYB\nV/FJ/+KAWmrZ3CMoegjtzBb+DrAsRlrCa7rCq4r7ThUPAfL3sWjhv3rLpop/\nE5YJNSCSQ3GFP2iyFMmJnV8FAekWCF4YH1sc27APtuGdXVqQ8Wd6sTi7P+r2\nsuUC0Nhux5R2ycUyrnftRI7T7jzTuCO1I/MRDCjUU2JFc3EAk1QO+Vw+oG9R\nkCfIXaZO+GvVBUkXmTTF+9+Qq6i3uKc0yKrAeIG9ZsoADe9pexOX9nsDGJpd\nigl7MXO0Uy54syRlWNz65oL9iD6w0pNs/BjCPCgbZloHooydP0oDCBzhKSEt\nN0TkySq7feXbI6wNXNAaHsGLmIf+I/Rxtcc30sshYCRhIURw3CZuey5Olg7I\n/sVoupyHGV1mba5LX5Wpx93vnZntPJeBHATRG6wqJPhrbcrZwVAuvXET/vM4\nGPz1zW/ubdAB5oY+/RU+5NXOVA15ohCQX1L3nhsaxvxYJq/ghAWqwFvHE4YD\n0B5c0iIfwE6Dmmc6+r9Yc5j+17E0EXDYa/KW1M8NrdOrQqPD46jfUSefBXu5\nHplke9InVPsWB7ewB9yxmZLsQ7EM7lI4auCTQR7pnDLF+li9pLDkxk/bcFMk\nwlCO\r\n=KvCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"6bcc6b75cb64d4f8c00bb10de4047b35634f0a72","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.0/node@v12.16.3+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.26-alpha.0_1590503528444_0.5906614759234383","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.26-alpha.1":{"name":"vue-slicezone","version":"0.0.26-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.26-alpha.1","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"0ccddbbb2a92634598fe5d79fdd3780714fb6f52","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.26-alpha.1.tgz","fileCount":11,"integrity":"sha512-rjI5O0wdYe6/oXmNcTp3vk75f3bPw83OGRhrVPfANie6MLgzJQS3ZjhFvNLtxcr3vhwIIPt6H6MqlPa6u0fx6Q==","signatures":[{"sig":"MEQCIBeUrgF4axtje3Sqz+S4s/j/Cnu8rR66wognyCj3EHffAiBQs5neIWTzb0zSqhdGgkw0InriyQRNIU9HVPppulQQzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1i20CRA9TVsSAnZWagAAK7YQAJCmhdkP3FimqrSc4Nzt\nZX9fhhblnXNdW20xTGEhoSPrfQSRYrX0kPgROBERRo9QAQV+5jheFC1Oayta\nitYXn7/PaOqNC5gS7EmhXZCAiY3km0tckLbHvbk3h/1fiecBwHHMi50iQk5i\n7QeetfdT/uw+eBhT/Gy+55jZGK1HKX7p8q4GRd9YEqrwjwDocABX8g3hLNMy\nvCAPUpFFDyA55wpvUUhRg79Rr8bFYsiFopRWY9gzme5ZyaV+3vRu6IbdcibD\nL9klMx6G2W/44M0OR0dYfKQfam5voYUR/8C/3yJtQhtUBiIwaUxQeQlI5Ne/\nk2anmyqVZ09boUNxdKBhwnB9r669xoVue7lBopf7WzKA3Oeg2W97m2fd4f0P\nkABZdm2Ea9w2yfv5tUz7ls6D/Ctmjg9hZh2uViLnr0VlMXBbOB5ahLDb2Anw\ncm6LxxIVNv4d8rpHIi+npgfN0lhJ8oJur5zth4UlolS4gh10RGQ/QrRs4xLe\nSbrx3KZdE8gAJtagzeEd/RcMXWUDJ0IB8FTdLv7JyiUdpqd3Y4F0XdjTJMyy\nE/Jr7GakTa9Wyo7pL4Pluf8n4MwGRU3taRpun8ZdUmVMcKtggOsNbvBGZZMF\nxtsopS65BIfY5CIj2K3XXlytxoZIoQ6d6c+Ok8s3lrgGIzDxqYNT/y6eHLS8\nCGxS\r\n=3y+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA component that matches front-end components with Prismic slices.\nPretty much a work in progress, README coming soon.\n\n### Configuration\n\nDepending on where you use the SliceZone, you may have to configure your app to transpile it from es6.\nExample with Nuxt config:\n\n```javascript\n\n// in nuxt.config.js\n\nbuild: {\n  transpile: ['vue-slicezone']\n}\n\n````\n\nUsage:\n\n```vue\n<template>\n  <slice-zone :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`node/mo/dule/${sliceName}.vue`)\n      ]\n    }\n  }\n}\n</script>\n````\n","gitHead":"6c7fde25d400c06a4fd8a50e6bdc42e01d4c0448","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.0/node@v12.16.3+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.16.3","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.26-alpha.1_1591094707805_0.9769610466927883","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.26":{"name":"vue-slicezone","version":"0.0.26","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.26","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ba04b3112a656c396100d4e49db47a2f02decdc9","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.26.tgz","fileCount":11,"integrity":"sha512-ULE6tssJmhl3jnvjRP+urLQN0oR/g+C8syp6fjVwqtopNMHABqhnr1wZadYDWAECVK0fP/IuDtUflFzmkR4y0g==","signatures":[{"sig":"MEQCICDc+UJwXhRnzbKv4HFbJbHUatQl7Kp0Aj3/Ju0lAaQOAiBtHu6A049VbZ7eSKK0Z1L01XukfRsC1VcA46SBI6LkHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3lJaCRA9TVsSAnZWagAAMe4P/1tYcu9HYMJIoc96Hinz\n2w+kQtaDn71bxCgFuFXybgcq2f4wIfc1DUBaZ4hjnr07fpQb23mgymq9qQ6l\n/v49a6KqiU2ylbKy3KvA/ffJX1Roa6okseHjOyr9KRSTE22KYoYFVwmX7Ag/\nI88k8Q9CcjZB+w2TBG8NDbUudS4G6tXkyXSUvJ2uPASnWXmKh+C7rE8uzBjm\nrvI3wIadOZTInoNUt3XWbWVjkJkF4xNDtc8olbanj32EtO7xjwfMNch0Aebs\nN++dRqTu5Qb+kadcoBtWyO3yY4pbwtn5p/tjzq58ySEp4oWw1Qt9Au9MUUO4\nVBRclKvnLuYbbYUEMszgbR6Qd6DTFhlQj2WGGww2dAkYCcuwhZ/TQefIqCdm\nkx6LJZzKEMjIrv/HAIXQb+UHtqXEVhZAoZEx9/QaZc5WlOvE+CiICoAf8OX+\n7skNQlFmyvzLigIk2NGCsr6tTRgogxPR1MwbgJ0yAoeCSpy+NydMJST9+dBK\ntMz6HdEH/VJT0dAXzzyMohDER1YHtqBxGRw5dzpa4IM597S+Uf/NST3M+HSf\nHtLBe6Lw1CFOGDwC9UzFF++ZSyjnmW1XYrudKkaRkndOzYX4aAlSVM6LvDrS\nSwy7rOYf87Jywt+zqGieDBKPFbecQPchL9g+cbg22SPqe2MFuP5vSNVHKFEH\n3t81\r\n=AkEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v11.11.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"11.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.26_1591628377591_0.8708500239841326","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.27-alpha.0":{"name":"vue-slicezone","version":"0.0.27-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.27-alpha.0","maintainers":[{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7243d68e99518424b9c296b60e4b2416c959c54a","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.27-alpha.0.tgz","fileCount":11,"integrity":"sha512-XLzNca9n+o5qcDLKC75Z1aCIwIKQW5xefb1a+ILg2leWx8j4r2R6TMjx1/daCesiUXVzdGGO19nW1fRj8vx8FA==","signatures":[{"sig":"MEUCIQDlyi2nHD6VBPwDQBZkTKjvwgqeO4SN9X9EL+E1pRBCOAIgUwr176ZcWeI0Ygwnk7b/4aRDg/XzmQ8x5AshVUz1hns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6eruCRA9TVsSAnZWagAA+v8P/0zH52KbUNjh9CpO6Pgn\ntx2/WpLlZAr0SYwxqwdZiuCI1fYH+Fv3M/9KuilHb8Zj5+MBL2yOU4vTqHXQ\nxT9YRDsFrKohuzstJyLXpGT5HTtA4W2rKS2pfuYWtZ6PyxsrZ7QgQIlXRuc1\nIPdJMjCXPxS9Nyi18W9aF7dxif9OEVSJh4GWmt1aBuhUpry1Ufw+8ww21oKW\nEjSb7BmFArZvdjDyn2oYNbrYyWmKpmXFn/y0QzABm3MMaNE0o8QoEjo8gcmf\no7NdMaGDRL4dib56QYiZHTSszrl0qjx+X1KxtHzBilEdUJfNkfOGbj8gR1U2\nSy7XJgWAjBh95aSHQA2vBLN76iU5vPTFCj/iuENEz66xrS6NZQggWRtU3Vzc\nFyJ9qrK9snVSXmXfDdRUrrmYC031NAwLEUcdHZ8hFqwMEWa/YkWLG1CfRn/p\nHu6Qqp7VtkLm7MKwBJLYlJzcrOfIcdoy3b7X202Dd/WC19FPSuMITo/mE5H7\ne59x4Is+iBhqor+P5mKUru/dqaa5RmhFy5OJbe+HG7qfjR3QHi/+E9Yk+1Y4\n1C/6W7xikEF3VsoelzE5tLT+xKy4AendKBNvlnysuJfx/HJOaSwtFwELYSTD\nTF8KDuSqqhqJkmp7doJiTEKh/djryYTaDO4TwZIufvYDmvzUh1uGiez0Z36W\nBIOl\r\n=wHoK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"820b2d157a1b92147da12da7792fdd138ab1734e","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.18.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.27-alpha.0_1592388334037_0.31879616013736256","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.27-alpha.24":{"name":"vue-slicezone","version":"0.0.27-alpha.24","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.27-alpha.24","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3563c371669c78b27f59bba9e49e718c29b82ab9","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.27-alpha.24.tgz","fileCount":11,"integrity":"sha512-lccj/ksA4ScJk70LDlvguumGu9SHR4DQf4k9TGfoiM0XnbeuEuVU1516J4R72q95gst3uxw4vMh4CC0dnfV8/A==","signatures":[{"sig":"MEUCIDS5X7t2LTshomgkAfnzaGZN4UDjQf96jUxQaNYJhR2CAiEArIBMl71CyGNP0yvUE3cGHEAtXc3nxu7DOu2a0y8KeWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX4X/CRA9TVsSAnZWagAAWUcP/3msG1kAjTbgClUwDY7A\nzEmQ5qJqfA1wMlATI2HLE8rCW3BZF+9nQuhcA9X1RSYbnG6tMY9SHn7iQ+yy\ns3IJTA+uFE68nlbFuXYtfrdEVlzvJNzu2PjafO5OYEdJ1Sdb5Nd2oGMGl20r\n8LFrFfID1MjoHQvpQ9Qhk5CWeDtNvhwSSOM1k5QhmXx7v0QZML1c52FrMBR4\nOZqrQmSkzCzliVllZY/PBCMWM3kPoLkpBrNL783hk40ljoMx25PU9muap60S\nsqaEMylvadEECJBM2RDH8bfpM7yp0wpYOtTsXup8vtsSa50Xlo4H7TdJpXRn\naNHvAji+/mM2mB+FTHO+DEMS/pdN5UYbJZaG8D4gyVLhZd4FB1llcrG5FHaG\nw7k9MDGDZqPuz3KdSLH55zrmo0/zDhSD5/lKhAA79nrP3kEuWEqiBnRbE9sX\nnZJG/eoJjZeQA74Ya1wOIBYdth49Aeqvfe2W96X03NrbHFdpDCNl+z/z0G12\nkZu1r/bgkWE7EL0zm3tms98H00nQFv7Dj+96fLoMgit0FG8w9NNSLQhBJiYI\nK8gnKeVb5xs0aogaWtjV3+HA83syVmqj2ExKEIH1dlhVfX4SdgOa4N8mQ/wt\nSfPPuAg8FZxud3B4OhoeaDNOvlH6OSPnRnnMZd05kz/RAukfmkuRgk2ND0Fr\n+1HL\r\n=vRrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"603b38500b6fcc396b908d4ef6a121d577a663e8","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"12.18.3","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.27-alpha.24_1600095742782_0.19247134720033054","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.27":{"name":"vue-slicezone","version":"0.0.27","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.27","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"cbeb567328c45c2e435ba16b268a4bec7c6814e5","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.27.tgz","fileCount":11,"integrity":"sha512-yj+xiEXoLYRvw9wbStHDaS7CKVXG3fd2NcLoWqkBMrq1NEJc2nltQEpR2gH80cPalBSMmURBExfIzweVQl0QCg==","signatures":[{"sig":"MEUCIHvCTs57WQlolvfqRwkt+mNPNy3ict/L9RzMQOYtDLIkAiEA9iT5eFVlqhXq+uvbg1Twps33A5diUJy31aRBN6LBBoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX4YSCRA9TVsSAnZWagAAtekQAISWX+X35HSh/Mlr7IiH\ng1QCczKTkOBc8fCLSnlMdxUPSBbFfmupcgRXXi3dXuPNBDAU6qtlpjgCPKIz\nmZ4PbvoN8ihH/FNP8qLDApWQA0+L9HCNEBDpym4sr+eveg9J9eKRTcRGApfG\nj6rEha6eMuNodU6fTDjGiv81qLEsPcG9lr/BuOSD6QcxCK0AHtbNx4V/6xTt\nonPuYN7beRQubJBfR0yxPdkjc0amPZA9LsEEXyBG36cgVi8aI5US9RqSpfW+\nbO9pqAaBBb+5H5VGo5v9bzY59TZieN/GN50nlSMo5CiyC5GIlHG6JeCMI7Tl\n4cmAu1cj+jb/tTzBtPGNlgAmLrLGtGKq3AhYmobNS85siufcXkxcUbBXLbSm\nJyyGv0a1q8LFY0uzF5u/grUkn0OkU/nXwshfU7Un8HLInQPkdAfgGAE6kZzn\nYKJNXiYwkOH5RTMAaiGhg1c/1Mx6ZELHrgf6kQD2QtdUIcG3rk3hIIHpYdg0\nPDZDgZ1zK106Zuo+eMx3tbGtf7yoPyO5Ic9vQqUsXUi8+OBtQ1SYU7BA25JQ\ny4b3AUHDkG/i0eVMURGYmDtETwgn3OR+T158xWFyAo03yM6MsHz7P6Kl9NBO\nxPwAQDwrpN1FMBM250v63t1xiAEdrKYDGho8WmNqGd2uTTVaqy0n3WUuF9L6\naNCp\r\n=EOa5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e60188e14400f74869f9aa040ae90cf463b760de","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v14.4.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.27_1600095762228_0.6830595107120083","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28":{"name":"vue-slicezone","version":"0.0.28","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"811b2d6ac3ad2b342406352450f30f8e05e974b8","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28.tgz","fileCount":11,"integrity":"sha512-HXjGOVCGsKOYsnwn8OSKlPQVipMaZ6dR+jMiR5jeacMlnGrYux+VGSL6OTOvyv7C7z236hcvcqwtLx3S8aFxPQ==","signatures":[{"sig":"MEUCIQCdhoENwLOWIB3ONMgsMkhQggNIEwUTOelDYL8udSb8kgIgQO8phK2PIlF00P7yHeaBPXO3l1FSb7P1wFhNlIiix4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX4ZPCRA9TVsSAnZWagAAzEYP/0J8nDnBlXR3K4LTe8TY\nLrJFw860OwBCvuR+ORfUDmqXfjV1y09nZ6B7Y2tXZAtmIndJSNdE3sVsc1b7\nTIAoU8vNB84QnmAxjqVOhmF0ITEW3+ZYRGH3dXdQuYGeMNQa8lQi00OEWqN9\niPBQfb60a4V8uTs0Dqz4pnQzRD37RzXxU6s7R5Wxg6nDs0JIzO6UcutBg5D0\nPMxwGUuMoacrYE4Zai3XKh/Hy26RslVwova22h2gTXjen9jwnA8mfkJE54cR\nrK7hhATPElgcLVKor/ZpSpndlzkwdXnIXFkPncSrPfOvPlRw/54YHHPbkv7x\n/x4LNvO5SLIKV3TQVArw4/wmVik4yoOXjvzxAGpRlMcmuB6eLuj6AnLn719O\nL8pE9OyjNr5VmbYPeYc/rzHiKjNw807zAy5dL9b9YWZGY6DBPb2vaH7U5i7v\nO06xgwB2XMXpZBpt5Mm8qezh6NEYcIyytVYWiG7EumcDDe1CZSJB+JjVms/o\nmFn/MSmYPivqfAYIVoVqegwx4zUP0tcb0PA9/dhKwenYFaGYtMXNhfTczUSe\nqM3WasTGWopT/95+Cx7IUY+3HtKT0t81LhW1N6QeHUwlX3trmSWuHNmGKEv9\nCnivjVPhXlcWQHVLmXeFg6XzSiJbNou35vvUZ0+4JGGzxazkkJFUwrngxmSJ\nuqnC\r\n=LiZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e60188e14400f74869f9aa040ae90cf463b760de","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.6","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28_1600095822759_0.4944205021136745","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.0":{"name":"vue-slicezone","version":"0.0.28-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.0","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7b89fd0b01d87d80a7a68c32c4e32d64ffcb8de4","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.0.tgz","fileCount":10,"integrity":"sha512-Y21N2HoFP6qWB4bONXj694mA1AkRPw7uq318zngSgK26s8mB8m1hGTPDcyIJOCrZZEKJ/XOLuWzJRxjazOUIhA==","signatures":[{"sig":"MEQCIEv9SidW/KfpplY86BbGAwV65fqu8fKYsnR07XuvCJQdAiB9spHm2LjEz5L1Bmz3JbDrUnT/B4PnB6RFCEE9BVbvMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2JnYCRA9TVsSAnZWagAAZ0gP/3BfCOzGlu1db/SPz1G4\ntccb19ByEcHCkfAthcf7153yXfGThKoq+UyQCgP87hZHYFE6RU4oiXydjyUM\nb43LzR4iFPJC1qe7PLxyDLlimhIo4x4bWfngxuJ8/eunw9mk4hQqgyI1K2EC\n3SB8CdjYTgeS0dnuZSydk0OQ5mQLha92seJoTDHykpsFGGgBpVvhIEd2zAvb\nqqliDt1gl3G9ulZpxyf9AsmHegu7rGj/I8zkwAdDZB6ADkqtwKlF/JVTH7Lo\nkNp2vmC4GMZHP/VAzaJz2T4uOaL73Pfb4nEcYJXMHUQAqihXvImCM7H0hFPh\njuqRN27PB0qczrv//H2jHZutsQFu/6PXnCQlKr/24vcnW/XThtYKTlsIvFAe\nltMyreDr5nxY9MHMRDcW4V/IWYny2oM5bhd3jXgGwje4D2V0fI2iWBwWnSBW\n63/ncYrcIWB1wQ2sLseHr3t2KMK6jLOdsc8b+2WU7BTGewW/QVvEOCzd4fo2\n8oV3iqlcbc2UYihmaYIWA5bFTWd4NxKR8K1oPoTAqEfNyaq3LrhmTjHOO4xQ\ne8sgEJx2Z1bC6nyObLhzd0NYOKdFl61mueQmq3EDWScrSU6JO+q6eBVld4tg\nPvpQwhwcxiWXKQ7BKtXCKKobTiTzoZzCD4mqnXLFUt1R/cMU9TDlsKjDCaf1\ne3iq\r\n=PJ7v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.6","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.0_1608030680262_0.6470250550474581","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.1":{"name":"vue-slicezone","version":"0.0.28-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.1","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7349ca0f496096c712012ad76d054f9de46100ed","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.1.tgz","fileCount":10,"integrity":"sha512-N8TTH/JLa3+cvZcsy4Q9/bQROYF09miX1S3s7s7ZzwobzmSs+ZCl4yXYqdQbcJITtLLpANJQKIqYKXZqg+vRBA==","signatures":[{"sig":"MEUCIQCht08Sbbb4bOnK1aZTzZHpbSRvzcjrIsxyZWlD6ETbEAIgFf+mDZhi7vlhgL0EWSIj1klF83omLZiu8c0BgAlYP7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2KSeCRA9TVsSAnZWagAAqRIP/24IwyT3/9gxCxefCgT5\nKM+T3vxjvCBlDhwaLG1bjhegTo1az2daHHdbhPj8YiDea2mLNPmBgW+fcHn5\n7rVqcnraiRbIBsy35yxjC116ukabt4J5IW8qTCKHGGcUlyF3G097xgCv+4iU\n/taMW/hpUnJg3DSpyUKXV/4P8SBzam8yO0yaiVDWSI8H0IzFm9w+iW1UPkjH\nVjvaUMDOktmgKcbgdBgmvdvEEHyn4WbGoBwPNchH5C4JeNPiHwNVRHMgcGgl\nv2U5kycHSizsglHdj86VeDPoyZQp3K+3W2RxLOyJ2zlnQ8O5yvfHoWgXVrIa\n5hi34qghcn2oKbtCFa+R30i2DTAKct0MZtQXCsz2paz9mqI3n6PUA9fbbMBj\nH7vO8k00OPfpjOpTwBhU03lRCcXRhiTzz98+mN4M8Ols7+vffFvMlYuMVCWh\nZrXDncHFYAXsaFv/Rd6d2xgPwjNgvd3qPec3pzcwGix8k17/kEQDr60bvrHy\neHe53WZNhglOA3iNlOpq/Cdl3epzCjh9SvlNQMgB3UmNvfk1OK6kB7m820VZ\nQgu3UnpXrVAVUWhh6uMUsp3fPlAkh92EqA+PhOEXOuGYhts63QPcM2BlLscw\nICbYuT7iKaFOfkhChrGRxQYHylJSwB+e5xrFGySfA2/qMGDR7Obf3QCee9kU\nOGUz\r\n=xZCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.6","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","dependencies":{"sm-commons":"^0.0.23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.1_1608033438404_0.4254204825945207","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.29":{"name":"vue-slicezone","version":"0.0.29","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.29","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3fe4551cd4de3562cdfd079f2dec2038d4e6fc19","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.29.tgz","fileCount":10,"integrity":"sha512-ccKhKLYpprGmtFcX+2FKQnoKuiZiF3eyqaHNC/E4k9vwiO8Y/sU1VL4Q9dOEwSlujwbenVVLrdiriwdmN8D6dw==","signatures":[{"sig":"MEUCIEEnXwc7mENnI0OAIm/TgAQxU9J8Aklv2kDoTv2UoQxtAiEA588upheW8ebukQ56HaUbZANtDN4vbFZ+j58q6brnYz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4dg2CRA9TVsSAnZWagAAQ6EP/R7iqjGIt/lBEaKo5b1y\n4O66btkvJKHxjZUjHQ/o8uULYQ4+3ovAfz0emZeKsmkTkwtGSTU2VIGGZ/3A\nhsQBhVzu4q0aFAl0jmBEp9opDWc/AYeuMDyupIUvXcK/Xoer6JeIChPM056U\nplzMenZ70usE/RMosamdte+ohv3hGSFZiNzwa0wwq2gVB9VqunGtfy36bNfB\noPkU6wL4X4YYXqEI5Jnsbwbe0TNd6jDp313ySZMDWzpvh7nZCOyKkiasNHlZ\nQgdMHPLz6tAjgOcqgGgbOTkQ6BkbNSWDnI0R1WtK0v2dbT+rX8Meo7csx+dn\n3XwY+unACqpQSc75GffW8N8Z/7NG98eBnOYlajazmDaXonT0s7Quz7Q2cPWc\n4/ChPIgjWiaPp47+/w6xkKYD5BzPQD4sk6t6eQnjRF5pZkbJXjxp47F62XWO\ngKHWcYRyEaoXyJRhheit1pK4Z8FvduNzRUrCklr1S4Yg/I8yeKogESfFo1wj\nQqDy/AzExcMWj/QSoxQ6FVQVAjb1QyHmOWoAKRypInu2Bu0XdKBhfKYHYL41\nLUgWRcVqkZ6TaJLnOvCw3roEeJk8Bgqua5nGaxR3aACZcBIKARs1vKZsSJCr\nOdlu7ElsQiVqx+luWWNkLj17iSkPujngry2rINxrao2ilf4y5dwc4LgQpxMH\nXUHw\r\n=Z3/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.6","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.29_1608636470397_0.22729752252297852","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.6":{"name":"vue-slicezone","version":"0.0.28-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.6","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"9dd7f77c080fc23c66f1ab035a530a4b4daab8ac","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.6.tgz","fileCount":10,"integrity":"sha512-GEqDG5nR8meoKXg3uV70G6zPaBjKmlzdOxad5jpVg8VRWFFoF8eQeC1w+opNXwEtmP4/p4dVFLiW1MoftyYf+w==","signatures":[{"sig":"MEUCIQCBeLCFTLpw9lXotbeNQr0OCcPypDnuor3k85ZYut6jnQIgXHrAzaZwcU+cKXQqLx+ga1O3CiS5nyxdcvAdSHbeIro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9EJCCRA9TVsSAnZWagAAZq4P/1jwlHRNE4kQj9I0NEhi\nVKL6/MSN4LdiEVluaubSCXAQhEkPk8GOQMazJ/1Z2oNByyrpGZZI37x/3nQ1\nn0K+Vagskgn+hIcOQU/g0rF4bEtQdr6PXwcpnPJemPCBax3USifIKMsHcNCV\n1M3HjjA3abtawztMrcrmYkqNJUHQB3GO7Nt6e5c9ds6d5IUr5BWAfMANyXq4\n/ohM6wrNXh2zwMEiFWTg7YXOON/gbOTdGvF7p1ytOv5G+irQLwWhfRVjpKgY\ncJbQlZ0H0eK/TDr1Gkqo7d1nLAYs4H4+tWB4vnXKJuriYsD541Dg/fTDPb7I\numl/YXbhSGWuqESkdkgypasJ2zF71xhqWPQNowganR3xATDviq1V42PkkhnE\nIV4CkMZV5hAQbF8lWFKnT1NMGGDscuCaNFeCsh/p6hrvC9bfG3YPAB7jbZi8\nuuHQKfYrfxQIMd56a23M9g1YqESUczId86Mn050/+lft47IAd09ZINN9lquV\nAZSh9a9qWtTqtTEPss6Yzdb3ddl9rmJb5Wl/sEw5pU0ZxXEjNrH7bWnAFN61\naOoPrCOIcjcikRiNzsyt3JKNyxXj8riSo4Pj2m5xz0jfIKVh2CQZ0mXnZrCX\nEQKa/AkT7+861WP5E679o1ZLGmD4Pp6FpDa2SG1hw5Dlgl/gzXdqA/CLHYv4\nRlAP\r\n=ZgjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a0dc0c82e5cdf6836d6e0734e759c7bef0bc2f7a","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.15.1","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.6_1609843265880_0.389439216309174","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.8":{"name":"vue-slicezone","version":"0.0.28-alpha.8","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.8","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1e7c0bcff4c9277829dc7b0583da2ed9ce6a4e58","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.8.tgz","fileCount":11,"integrity":"sha512-FHQ8YxcyX84WMx+1eXWJbxo/CTQS/Zu9ZNEip+LMAre8sKT+TMXxeGupT/bsq53eRqkcOrxkoMwCC4uyWen04g==","signatures":[{"sig":"MEYCIQCnLEjNG/VAIDgY2G3wM+6WX/pSrKVPsiqJ6wa3plvangIhAO+d8YWU/LPvvw9tXnLfP+hy/vQn39q61DaiLWMgCQ7R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQHVCRA9TVsSAnZWagAA96kP/3pnBTlCsdsqy/mtFM59\nXBey0H4rxf9gkVn7eWgP1RJzYVBBPM1hyK4JKOxY7Z64x8C4peBry1buobZV\nYuoG3jubYIk4RZ+Nrb36DLrcT5dvm2WjzEA5JPISPQLVFUSll+cg/88qptzG\nrDIfhqaYAHy9zuvNBWnZulULfbtkEW8bE8M0orfK/4wve1vD7FrVTqv7MRD5\n41c2UNtQXM7sXiIA9kDmxt4JbC4SwXA7JyBWGgSNEb9n1zHE6UtvPP/d80hQ\nLQO5UgESOx4aa4Rm7FES1PRbEXsja0ty1XRUYhH3WuVK5SuzZ/3fhattFYIT\nAmyYG38KblVnKbuMBF9Bjbtdj5BcHxe/vqjhATEC9Ds91rrZUnYQ3AzS5M2Y\n0cJWd92k77RF90hUAoGXAl9GlMSh+aPr3MUBUXuaQmZmYbUWpcN4Y03eClIg\np28tZ2GXq8eOEBAe37C12R1mcitFzYGsoaGyd+bV2vBDWeZm1cBksZZFYpmJ\n2rQz4u9DFO49qQqsraL8cEpNNqjlLhGQxiSTdJTmju56KZ5o//h7KufQdSEZ\naAbMDJzWxOYoUCU3PXe4oC8pyt2lmaoUeCFVWty9ZbbOkoRbWjM50pZnYMpC\nwph41gvODdXtYU3xWR2+u1yi335FzyeIqW/Qg1C/eslsjIvpV8WO4ztvP9Im\nDMEJ\r\n=DDaQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"fd8eadf7da930d565faca6c2a152c70cd48e736f","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.15.5+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.15.5","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.8_1614610901455_0.29758912862854525","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.30":{"name":"vue-slicezone","version":"0.0.30","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.30","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"8c97f610952c004130d10a1703c9e7d86efa08df","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.30.tgz","fileCount":11,"integrity":"sha512-xiiiRxZVSoyRdQyAgqSwb+dsXitU+qzzgJfEDqKCZpESkp61K6krpLTcnI3fNRppZOePo+87NVOZ7LiE5lpXLA==","signatures":[{"sig":"MEQCIAsax9C67AjiDk+2KQd4A2PSE2vUXgfCzGmaT3encCRnAiBh6+3XXZS2VPN/N0PDS42WHzNNOaEaScHnug+WnW7tNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQIACRA9TVsSAnZWagAAESwP/3btst/aaaeADibAnSrG\nIa0UCD1KL3uOfrKwK7CPw/nsK0ZGHoPTP03ZcMO1gvnGzcisf87np/GMopnx\n/JxLp9MqFpGC+spDLxM8aW/s44QCywgWAgp6MivtWd17bbVNiHW4f887gfoc\nnY/i1K/D6HryhWnqgo37SKEo45c+fPcQaoWsvjuqN47CNUrAZXtDnZlQN9wt\n/xZdHCSjdI32OIUEStV12bnIH95kEWdAPNm4nIc4fMl6gxQaQYFsadkz2nb7\nFMEYL3ZUVJZsZFe8XXjayIoJEYlKLVYjrWybyvfemJuE8h+N4fvoVrvMG0V7\ngYIc73fnJZbaMamW9viP7nY0jIkhv2kDJ3DVJzflCwC3yIVLOtXr1XZff04u\nsS69IDdpTyzzhndUHUd97G99E3qazaa5ybJNSAsW+3eTPZXn/e01VIUrkV48\n0JfvD+glWqOimlENeM92kzdrPMmQjiHrXhYQaW0l58DcJ1qEER0wYvWvUKrQ\naO3+vkG2VF5aCygrUthyYlalkxGbsZoWl12/ABZwhYLptK7Tju6zVzaDA1je\nczNgA2TVXOAirgweHAc632gcfaB507baxiNLOioxylws4w822wVit3WRsHrI\nnfmmawxZYj/Qj0VsysbpoNxAJO+KjHkmz54qJnME3oHm6kJoHFSvG5yQptip\n8e8h\r\n=S0uR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"lihbr","email":"hello@lihbr.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"6.14.9","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.15.3","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.30_1614610944348_0.951226529022601","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.9":{"name":"vue-slicezone","version":"0.0.28-alpha.9","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.9","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f9becf387d50dc010d461e44cab86ae1e123cee9","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.9.tgz","fileCount":11,"integrity":"sha512-rid6qm41cTZAHpjhAnlc2xIjiDN88Lu21kdSDTSyYrMpeCv2E44ykUx2CZF3/g6J7N9ro4mEhbTj/fpap0yu6Q==","signatures":[{"sig":"MEQCICZ4RXvSvFfGWZPiHU4YAiu7Tm+nT1n66mQ9UXnp5Mc9AiAnNaHztntTkIFFszNBeXYiNd046Z8NpxQ/UbgeXn7zyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPQLPCRA9TVsSAnZWagAAz0kP/2yD6RBLFQassvAohrSB\nmZF8eShsPPbZVQBl0qfQQPi/tBDzzZeGdroBTEpW0PwYtHb8mSzodKqvIMnO\ni2kyjC7fKGN7qKWw3Om0Taig/tpxczcd136+qEim2DaqNtk4u9amcFgha228\nJRQm/cFjBJeMzdgAPbgZCUXKo8oF/dYfFhN4OlgIPRYRTpnObPlnRlNCBjS3\nFUyFz3f+mKhG9k8SKH+9TuaUyz50M4XbuT0YB1oCdbzAAnM7fawxZ7xbbIHU\nogdiba9U4E3kVTyhfYrsLHWPs/z/63oU+sgqL2RPiTGdPK9kaKZT1pfDNITW\nPueq2LAqrly/EfFUmV17d9NwJ+z85RDQJGf4UcU78bN1xifyK6OvYk41urh4\ng03MOyyKxrQo+kY/QIJpnHsQZNEaMW4as4P8HyvQs/cUXAdVh+xwGQciSUf1\nyyQ819PR5LbYlz24nd+pvTIV9UU2BWIyc6DZMFlKMXfAJ6ZNlUAQ9ZKDsBSs\nM5JfNNOxyWj4WQI7XxCswKAtqIHgMsx4K0f8ba4pmvP2MvHAJ618EblIWLmT\nsUTm1MdFM9AQ3yr3lvDoIMaaNkBnY2Q4GTheLNTWjv14xXN72DSM9/CrvIjh\nvRxrXM24d3nvJDfpojF4TRIBc5z85IEeTJMEmixWNh+vP8gL5oajuw7aRscV\nM/IS\r\n=c5lu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n````\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: ['vue-slicezone']\n}\n````\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n\n## Examples\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n````\n\n**pages/_uid.vue**\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  }\n}\n</script>\n````\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n````\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" :params=\"{ key: 'value' }\" />\n```\nIf you just need to pass a lang, to the API, pass the prop directly:\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it. \n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n* a component (see 2nd example)\n* a promise that returns a component\n* an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n````\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n````\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n```javascript\nconst theme = {\n    color: '#111',\n    CallToAction: {\n        color: '#FFF'\n    }\n}\n````\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n````\n...including in a scoped theme:\n```javascript\nconst theme = {\n    CallToAction: ({ sliceName, i }) => i % 2 ? { color: '#111' } : { color: 'pink' }\n}\n````\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n````\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0ca9905b0d783c778c6e8d9f261c65f2d9605e0d","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.15.5+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.15.5","_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.9_1614611150734_0.9052505799952766","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.0":{"name":"vue-slicezone","version":"0.1.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.0","maintainers":[{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ba63bd8946da9f4ae35853d75ebbdf437822edc7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.0.tgz","fileCount":11,"integrity":"sha512-wZyO0DS5NEnI7Uxx2KVZlOtLE7zXmVgvKmESSv5XyH04BAcnmQHIaUf1lgah6KqP/gkepoJjwZY0R5ia0wXFKA==","signatures":[{"sig":"MEUCIQDNqQrZPsM8wo/SBHvCpleYl1qkRLk6X6I5JbNHlIt4zQIgLIJlgK3TQYhlCT/h89L74zt17iisZ1sCfGYy5eR2ja0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0gDXCRA9TVsSAnZWagAAh6IQAJYcTymSkEB/P6OvM7lq\ny3dIaLcC8az9I+1qlvCkSmJCN7NiyB1/Qm1t2qeETRszENzwARNncgQVpceU\nL8B4Lfxg4krGjbAfrQjJtZtf76RJlo3Mhq9h36jD+6wPXCwmS/kXnRytvPTn\nO3XXuqO/MUacwCnqXPgwd1S5/8ackkTmTs9hMuFvwwoAuaK81GLHa3IvB3TO\nw9J5Nc5MSq84RnuiSPyIR8v6A5MyGKESyxxkHEUbrf3T88uL6h4m+BOcsxFf\nwphCmhoILmLs7BtxCN7dSfzsnPinxN42q+MB4VLOHt3QrtoQ82tuhkrH2pSs\nY32Ne6yGzxO09UYHoW2rpe4sHUBs9kUITICcHNkCdFCDu/DiYqF71/840Yo1\nGSy2HBrUVrAV7JPS2ARct5xv4/1+uW3jBc5l5JheBngdA14ALIGPpN8PVYOS\nlxY0pThcyPGN9urrwWE0+mNTv7XdukL3penYwNTD2dEVKhw1N+TB0tRiJ7zT\ncgvEnu7G5aeQ5dcechgThpntcU/nHGNDXUfchicO43b8vBaiJaTM/9+u4yVa\naPnQ6JM0DNZJ8k6khz2f3Jk0qCKnPVQBP/RRE1HiJhAD6cYJKjFPRAytOX+3\nP10neaf9znlGHUlJg4awiUAeS+RQILwVNLt6yu37nlsiGHn+ecZzXSos4zYM\nBkbH\r\n=XRsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"fb20ffb558133075252c4983d496d21de7db76d1","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"7.5.2","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"14.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.0_1624375510690_0.2888134818559933","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.27-beta.1":{"name":"vue-slicezone","version":"0.0.27-beta.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.27-beta.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"fec0a18143a166829f719d24fb3c239c73e527b8","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.27-beta.1.tgz","fileCount":19,"integrity":"sha512-j+llmEw4EtvSxlgPf6lfMI52syqhaPh6yDnjwSI59ripKZ5HWIgrGiOgnzzhRCRcQAtpb1FwsExiFDQstR5IBw==","signatures":[{"sig":"MEUCIAwGVgUgt3nlFETnOawb3x1cJu+4WO9FDLpWNwO43k4UAiEAqwyB+3O1gTDGMciOsCx99cbITl03aX2KvGUqtyaRwLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQMuCRA9TVsSAnZWagAA2kkP/0PUA5NLw829yVPO/jht\n5pzbdu5cjH+hs1HCJNgB868u09k40K1tNhasB/7R0lqDO0QrIrqstibsPbyy\nnHWfuh7MC5jbgRbC3CvDImLPsTcRYXAauMQ6Hgvz1asDWwZnZxxfZ5VGaala\nmFCbYK/s/uZmpcOxls16YO5leJqj1mmeejDG655EhN2hbQI5nBEv7BQ9Vg+J\nueB0Ed48BUo8/L42XsUWB4qsUmVvqEYuH79LRlkvHAWSJk+ez48DKAJX4JK1\n5twDO8zIVr1mDtkXh79waUG9toZiGmV+0b5jkUW/q0sy7FYTjKrEt/UJ90Mq\ntcGHm0/2tXVa5CrULwhkDCE6I3YNkfPdnqfehNq5Ylf0chvpNFUcdJqd+oAX\nD7dzSMShnKuveaXew9sdG8L7OHpf6V3L2UfnM7vJBZ+xZgkORLC/qDaQ7iJD\n15WaBWb8sf7lDDFcDOzmauCYaCSH9z4P/h1tJDmzT0ogzdjkGwBy8NTgGdRe\n175ehNoyMO3Tl2wboELDhC+HLkRbBbv6SKBvBMn9BhY59HYkj7IganUTJ/6O\nuIQzNJTQP051BjI/l72qEwS7VPsTPrJ51z/CaL132F+YxZIc755cTgJDaUph\nK9hL8yMPFHNRrZ59Vhlva+8+dYqEn8uxZyZSxjOGCGO3oRasZetE5MlI9PWN\nRUDh\r\n=ONFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"92acc9952004d6a0e5536cfed72cf6f6b0305cec","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.10.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.27-beta.1_1637679917666_0.9977310972861348","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.27-beta.2":{"name":"vue-slicezone","version":"0.0.27-beta.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.27-beta.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"e176115475ac2be703bbcac3589e3b8a378b6cd0","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.27-beta.2.tgz","fileCount":19,"integrity":"sha512-6kIZmYjZWlmy/sg/aET3yzZBLP1AMkC6T06SoYYdZiAlftc79oKi9lHkhtJqH2tvbiLh63fM40ABjFhDxnyvSA==","signatures":[{"sig":"MEYCIQC1j0mgYdruPWypKbWEW3Yc75XfYtBQybzb97tYoKI4nwIhAKwzYRFqMZdZRd1GHmBRjNQG2xfWQKPUpR2AXofmCa+G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnjkECRA9TVsSAnZWagAAvVsP/0eLX+ZepOrEgODInDk+\nGkWOkRbzrzbiusS3mQh/pR0WPGEJK38hdwDSvUn8faghAQdxLh9+kG33eYgA\nVfCjai+S4I/lTDe3sK0zywj7HViOoX9jFsZPXrOhllamCp6B5h/uTM5HT4SM\nL4XBRtNT4SocT3MYl16yrcOzZ/iI/3gah2L3/46ySwWtydTJUzP0seDxkf/M\nh6DrMcFLGYOSmGm4gnrp59Y+xOPg8oMFXxEpCHDkClSV4tHeJ7SEIYyN+To/\nnLmmPvCCW5I2DwXPxlILMNjriIH3F0SEWqfZhZdIbfbyPKyLJ4oDKiKQ0lGT\npLCxtMrbCooZC081EmAEwGkSIN9rPVdJ2XqyjYGTC+/04t+MVhIEHgpFlcju\nJpEoTYorLUAOPWchBsQmKCdR9q5qIlc/IO1LWCemF/dHIdSV2i2gSSeTFXZT\nx6J5YjPF8Yk84oTp1ORGqHhnSmp0LVBxfwqOc3dEOysXcH7PMdR1n3n//0b/\neC2nPZaVhzQAfB6JiUE59lWmFYms6b98h43edPYjGh5ESSeyJ3iF9Tj2fS+q\nhLS45zTjR8b9+8KIpV9BhtYbg9IecMXBSOWIxnkcwuIxDZeIZ9ZZMJIFRYHX\ncZ1kEIrNP5kMNuR74cw8e4wn5cZ4Gb6uodI4OV8HEcSU0sBUHhKBOdLPlcvB\nL7nw\r\n=pPm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"225704f73651c79993eee368d6911f68848d7e47","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.10.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.10.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.27-beta.2_1637759236464_0.8439453999880155","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.2":{"name":"vue-slicezone","version":"0.0.28-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"2fe46906490d40c39b93d4d7df28b9b1f9fd8314","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.2.tgz","fileCount":19,"integrity":"sha512-/0dgYz+9oZb3Pa2sgPdvd/oqTPV2xAeeR1SVcgZAZRbeNNm5kpkgav25+PL13GiX5TNEAOrxkgjZYIN2tJ0NJQ==","signatures":[{"sig":"MEUCICbeCovzU2pLylwHDH6x0PTiLdNky4nAdSRgEUnMTANvAiEAkQUWaZIiYlwamDiCCD5QSZ6bKp/2EN4tMbcvLKlvWX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpOgUCRA9TVsSAnZWagAAYYsQAIWTU/5AfPrHvZ8ZAleH\nQ7IRPx7IfK8kDR8hGU9OlnvlrfpmPyH0wIh9oAy/72dUrXuwQqQoHujQk4hq\nTfgGOOXvzt1IRrbOcqhsQMlMHnHTXSOqxifXJbXfXPAwZkTZtZBbdDSocbo7\nn3XZfnbxEnxvIq23MBEsr1F2JhaFB83Sqc5qSq9gGAxVdTmgCF1a8YRZvY3b\nGax0I5F3kcoHtBcElEH+rJ77kQH584lR6e974a8oY1fjAmSDCpg18o5cLhi1\np6j4c+/utagYYCEyylvLV17t4aFnnTYUtChVXRfBFCdQ451/CNb3qOMq8ka1\nuMZ4JlaUtErj7WneObK4CtZXr6++Zyu+GkoNJ1u6qAzhfw0BEOCWxnCegLbx\nL2DgM9Y6TvwsdbpROwIQPzm23K3EcgJWEomyNA5PAL7TMgRR284f6qeHIPm6\nWzVxtpYfyaoU/yU3vU70pmec5hQPpdW8ouNX/+2SBPTMdov9XJwb1vRRXMAf\niELkR6StA4xqVlGFpolfVkp1tecDBUyE0NwMc56c9zFYpoJM9bo6fMurn6p4\nUXTlBYrGgbDx0p64rAkqKdcTr1E9OkWrFa2idkOqRJd87h4qHcqFCg8ZQDxH\nktFHYeNP5vV4iZCQBCzOafBk+KX+trOQAuOdHyr90LIrx4E5b7sa5z8PnbMm\nMGln\r\n=AEl7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"ad0b59d7c7b1011c46b3ec7191e25d8ba94e7ca8","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.2_1638197268162_0.6743126777735957","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.3":{"name":"vue-slicezone","version":"0.0.28-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1d05c8cb09d9e3991e2955009c85ca4c86677c8a","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.3.tgz","fileCount":19,"integrity":"sha512-cEicH++CCVz1IqdHCFS9JZ+EbsslMGZtSc1sbEe34LV40o+tuu3ediaAN4JAT7qrjnq1E8QZzK/i+lQLjNcADg==","signatures":[{"sig":"MEUCIAO9GXatCpLZp17IdFcFGLo/l6S9yN5qwq7NZI3uBl1GAiEA4rNxMUUqPKk8ncZClpHtNamYPf5c9rYB69Te5lURkls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqMU4CRA9TVsSAnZWagAAGUYP/3DuIakiJtPnARt4ZprH\nqGdGX1ounk1oBTEQUZNkAU/d7hAE76pxVJc/s1ZiYFnjZvf4chVbq9l2vmUa\nUMZ7Q/97nZKRuls1VigS6IL8qgDJlNtn/fkGx4wkS3AADfJ9qG+/5rWZ7UxA\n1tlGdQlkLdIuKUDQsVcZFIBTsPaP/tq6xQWP2sxP2M3S5YBj9JJAuIXOLOof\n1pLrSFCHRYSogqo0EpaOGxfvmXIaIkNZsb68hHpYz8RKH3FrMYnS7Q436MG6\neZpiVeaXTl4VaR0ccDg9bxUupOYUiYqHJ8ZK1lPcpT2v8l2SPLt+W5dYlzxq\ngJErU2cf48Zoeo5qCDT5bUjKJt2CQu10+KMDEJxUOwpDgfsOUZQPyaabbd/p\nK2f9ilmh0ez8DBoKMvw4QpnKquMiKyeNI7qIampMIu8g0Ck4XaxVqVDrOJjT\nywYN1GyDhbtH25DVBiTnOpRwP9kgULCBs8CHFCUtXtmOlxeH4GLyVKBb5VNm\nJym6nvEKt5tQogAzL4LbgoygcQ79L/+llSXRRwyJ6PN6nGaP8RITERgqgFPL\npeCmFw74/a0+ue1lj//RJOEwajK4SSA9rw9OaBvqa1KmlmWOl/amkbvbMYql\nonU94XRt2vKoWOJac1OZge34DYc9L8PebCs8G/ZH4b1itaiD95mqXNMsbPe1\n2xd+\r\n=dPqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"8e27d378c59a945a662111af15b18af924012869","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.3_1638450488063_0.32472539109258824","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.4":{"name":"vue-slicezone","version":"0.0.28-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"59fa03725327423963798dd43eeb3eb765d64226","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.4.tgz","fileCount":19,"integrity":"sha512-ykXGceTOj/fW0brW14/fh/KJD2fkVKVwat434aVOAydILetPFEf4/BJnlPLxrwvzEjaJ/vXqbM9Gqi0lfsX1jw==","signatures":[{"sig":"MEUCIEjPaEAlhsDW6VnHLzkvn93fPszItRobr5BBpIv6j4i1AiEAlffeR6KLOR9zbrxvT41pVKrqJyvz5PFttGuWIFjR3c8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqPefCRA9TVsSAnZWagAAaR4QAICIqHq5qpDRIKCXZviA\nl4M7gBLHyX/Vqvz3beInTIew/TnuwM4q4FxlfUV6mHchPCYaxufMXWBE23jo\nF7rLNgQujGYDqnBYHYb475yuvDG5CJKRVH0VRxTbKlZwZ7CZLO9aozUGbAm8\nlkKIj839DNecpk00e3FkLj5I7PMBGgE9b8z0GPoevMz9yjLs6o6InCHg4J2N\nDdEjaOzY20YRI/Ir61vTNR5QQvMe4AP8TLMNcilcRGr+qlipSKq8IHLaaKRb\nIhgyj53Efnxm3FHc2sZMroRbpZbxuOGDBlTgtcv2YbIH1wB1cePYAaDZ3loR\nHpzL9uNrWVO0fzALK9KACxPtBFrHi7QzY+jo269I1GDbSHTJUObS4ylRq9fI\nV2BQN8Tfn5d6/nK+rcAi5tawY005EpWfL4NV9Dj74y1wX0SGdWDfdBiAkRGI\np9Sxin/Da46M9mCiJavYVEQdg8yBnWOh7Yd36Of6EQzo4/P57JzGxWWZhI0M\nV4NZL+I3/Wd7FB//M5NkXAS9LMwJvzxNEkML2qoLtd8IOG+5teBofmdrcPql\nKZwW1/ne7mVmWt8PJ0n+7u31TGKepWcWqiMO+we1FCM1OJmhiCfR73B+9ND2\nBVCHbUtRBDgFiG4DZ9cUZlar/Jn1B17fUxs8Jg+k72AlSBknoJdrKF+LpbcK\n+zUH\r\n=TD0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d095d34843c9246acaae1070798806afa28527d3","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.4_1638463390955_0.8147909267236204","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.5":{"name":"vue-slicezone","version":"0.0.28-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"0add0022a1aba46bbec8ecbfe6e26f59223b5521","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.5.tgz","fileCount":19,"integrity":"sha512-IxnlsesKNMNTJEXeFLd+b+p4DuzjQ2M7diPvYqFLT1rAcaP4HyS5UXkD6O7y6kAHLAZDPAhuHpzDQzWixzj7+w==","signatures":[{"sig":"MEUCIHpkVj9rUEyrTqk/FTLbbc2YBtMQ3tATiyi3Rgh1ucasAiEAyj1nqjB598o6LUYCQr9Sn/zXgN0cKFEbyJaQdgnKH1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhriaYCRA9TVsSAnZWagAAkQAP/ApjmROx7H0kQ+IMgtnV\n1PAVAOLfmtB28R4oG/eBCHd1XGwDF3O1TvmCQI12/bwYPcoB6OGYYGTANgcX\nXCqDRj+o0EzYTBOtZvAiv5cUudM+VYNCCU5tfvr+/zYUyLFDAKExoEiTrta7\nq3PIKQ5nTdzP1rP0MeUHxaUxtnPgi7SglvFbGVYgok1MEWrxfwIv3ZqeSpSw\niNAaLjoGAcXIFLIIHCDvh8Ef9wrVcSbseAZ/+0fMfCHwMtG2PJtDbIf23Zom\nFqv3ar8uU6yaIzSyXZ+E9ImMQ0MbRYgEctga/JGzG4BLRpFnr7sPojAtVtXb\nd2MdjfjE9Ta4+tF9kPOD5pTm5/Oag6QfYtAy1ySaKMH5dJt6EcQk7xE8hs6W\nKY/1IB3zhsuDWZGijnGLiiKPEaFn/nkTxj/Wnc9B3UsaLRa867bhjVjeNyFY\ne/6+jnZzu5MTJ8edzz2pGpybS8FYGUyixs0a1Ixu1zG2HiI9Irq88jft+4Cq\nnhy5ivJgKJJr0VbW39TAPPlkiuuc9IIohtzbZpq9m7rXac70ivqr1DVW73iu\nu50TcJ5iB/PF7TwuiZcDog/QzVOIfys5qyAB53apvrzZJ82FrgS8ve6mLEVb\n1z8EQQO6nX1+6Qjs8Wd5dCpFTALE0Fn+Q+qeJX4nwf0E0x1lg2JPI+WjlIZL\nvkDf\r\n=/NJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"301627d7e7302666ac95b4dba947b6c7003506f0","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.5_1638803096702_0.24550013846448526","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.10":{"name":"vue-slicezone","version":"0.0.28-alpha.10","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.10","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"b9a0d417bbb64da5e3e0e32b815902e613b97c76","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.10.tgz","fileCount":19,"integrity":"sha512-zsQixeQERuR+fP5HosRV/6WLA9YZ8EYQkbqs+6NVECNnWOPc4Z528ed72JXsa7ZzVSHfFrgtQKxNBXXYn5+ILw==","signatures":[{"sig":"MEYCIQC1nZ+EmIrTwuAIBR61L6awq0YoDlGq72t5KP8WwLBKrAIhAMz8LvfIfccSJarZ4Wgvd9u7MFCZ4Cb/nVR8A1Y1utuF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht2DWCRA9TVsSAnZWagAAZCAP/RhMCzrGbSkxXwh0BuD7\npnqC0X7rm2NCgMOqz7WS97gpdFBl+fZDhNqzbjH7btof/clg/Q1gpSHfsopo\nGrESKarflsKCXOufuD3RzcsaFq6gjHDuECLDF1Rfx+ij73KjhkLHW9vghWez\npKf5uDc4QJx7A1IFzpL2hhTBxigvKdw24+tnyM7GektX83Pk4oaoYSHeglxp\n9jnvDlLeRv2iDjls/1koeb5DCG5Dn05LcQL7d0xCNLwlt81Hk1I4VxuYGbdy\nI67bCGKPBBEvGk3H8ybwZv95s5u737csjBeWaadmu1gV4VgI5GNoh7KPAlHi\n5SSOxIexB/wfrnauIZRzosrOHpFqScS1IkS+yEhbAdrK3gOhtPJ5WysP3jjD\nTHl3BI97stdhWGq4Qfo9hGVis0DpXtwygf5pb85pnDN45OnDiolGvJOgNQue\nKtqvxSIavL97jY4ZNv60YJh/YUGG4e9Wc9v9cTKUWAgnx57vQLK9YL+OEomu\ntcBJlkg/DITPXuHma4gdR9xGBrjmFAKQhhvcFDAH+GHxcixJ6wROAHnbN95u\n70fvKGD/isvDGGzhtr+3oICU2QKhN9S5/nEglC+iv6OI9a2F2U8a5IlNZquD\n9jw8oYekj3M6uQf3L4kEU4nP+IE7Qk0OIwowp/JF70Kio/JUA/Y77k2kYOCl\nfwce\r\n=uiio\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"8109760f95da8563d79dcd1dbbee755ee0f75a6a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.10_1639407829853_0.8665583339674252","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.11":{"name":"vue-slicezone","version":"0.0.28-alpha.11","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.11","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a2708dcb94c8c9302814ec15a2aa6f95d95b34bc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.11.tgz","fileCount":19,"integrity":"sha512-ZgTBV+OQ17HoQcayHE/WXEMhT+kVVEFaBtjxAJIEQrOXvAc21YGN3Kvd/BEu8cMYruBH1f7XYXSsNfGG8OMxsw==","signatures":[{"sig":"MEUCIEFqldI/tvvmwEseh5LboVt03ZU0mmzkbzuLN0C73p59AiEAu9/EE+fH42oTXcmGnTHKn4A5uWL+zVKz9CjEAbo0xuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJht2nzCRA9TVsSAnZWagAAhHIP/jgrBK6lR0/LWq666Zjo\nLiJ6zN6MuEiykHg2HqyV/Miw3dP60pJz5u103q/HMafWWRhXZXP0z4hjbxcq\n1H0Y+KiP51rl9h/EwIn1JVfve44rFNU6R2jPd3XKbvJhNBCxlUb9lIVvgsPd\nY3O+gFhL2ZpLKeMsnFHADktpP2l17VbTfMsn1Jmv2enhOBjlH//zyKAtrowt\ndqsaZfXSGVPzckOIA51k0ZLHu5xnQ5uBDVlQJhXiwRTjCB0OTUBlQb2AtpHo\nMNddQmT8rrfa+w876BfVYGDslOS+AGPdWM3nBi76IGzkpgglkQByt0ivFET1\nJpU6v2tfSfWnYjnJYwsknIEE2cuOTECw9X0l7LDNCE3Ox/L3dfi0uLlC4Ihw\nDmD7Lp4ao51c/Fy8naaa032vsRkXL4SmyHz9uTVdr1DPzKaMha0YF/wkh3S7\nGMwbajcJOKqoMdgmU6fK1guStHVaC1vlVuNN1cqFNmLCK+yxWDIB7qr5ZDor\nv9o+dmiu5qAzQO+za1xLWTfuKf+0FFtvkMWbZIFCvHBSzu3tUn5FIPcdRl3k\neAcDKnq2Mvg7iBwxHFrXisOp0pDNAlPp0ry6z+5PTKADRK/oQYtMCd6zN0Qm\nEyHEbkRJWnT3PfdXMXE+jolJp6KXdoA3r6UDOUIPMEsfEQuL843BlPSXwpRw\nOPB3\r\n=VHd3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"1712d1d0bce294c80c891bd5d20f758bbf70b047","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.11_1639410162990_0.0651669057820079","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.12":{"name":"vue-slicezone","version":"0.0.28-alpha.12","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.12","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7edfdc05ccf9ae11167b33c3e3bc370e3019a55f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.12.tgz","fileCount":19,"integrity":"sha512-Yec1AbYA42nRYqdym1w+5cCUuNfLy6WijHWd2H/U7Eew0KeYtobT12fU4fXaEZkHfZ++mRYgPLmHuwB/QsdsTQ==","signatures":[{"sig":"MEUCIGjH3LCCrTbICD9mOb2b8+EBOp5BlPDFsQcbicYgD/l1AiEA+oa0+qE9OR9rNvwugMdJYfJNlt08ZacLsEKThFnkQMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuGBfCRA9TVsSAnZWagAATmcQAJvvDGkos8vjZoVjhfh0\nQWAdhN4IVZU1BRN+q10DhwwGDQjfcWPSF+KYGA3VyrDmPW1A6KUjzGTMqcNI\nI+7DofhgR93kQ9RzHfSoxdWJFJ9w7m1aGaMbOkknOGyVcQ102p80uGONWLsD\nkP0xDV7m7gyuJbd4kzJ18oXyhUR/jz2CHHDhQBWlQAVhoNSVl6SgELlZTtJr\npvKMEi6oH1PDChlyUiaAemeRdU6UloDOe1+8fWttitL2NCKdq5B5j3OxstPJ\n4HPXozq4fBS3AiXk6HdvZq0hldQ5aHfaA3gCPU3SuSrJwZLnmaGBWVET8bDP\nDYM7AGAhSVfrN6b5b4YGBzRxH8J1Ns5Ay6R+a76n0+8CiGoE1Cu6Y0Nex0JJ\n//9i293+NRIfFccbRGU4XULYIGuZ8W/kDw8G+D7Xeu/fDCfzSkMuX+bhlqWC\nc4m0EYYdXTHMmSJ0GwC7PM2HZPCtAkcY9FT5LpvQ90bNYRjC69UB+rqGWM2z\nBYsX9KbcZdVb4wjeO2RUafTpYLLGYbZkF6Svul9ilf+PuPkrVw+WLHTSQ3Dw\nsRLuj0FqfTZyEgpgBIwuNqrNlU2SQWj/1DZb5xzCUmvu9Zlju4CbcFvtj3Pg\nfq15cExE+WKjyEyeFvLtVpTsTxZncjNWvs9/heW8V9qQGodUcNCoIWlnQUiZ\na7Ex\r\n=p+qp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"4db4aef1d799725b7164831aef6a25546ca1a376","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.12_1639473247734_0.5741927410254128","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.13":{"name":"vue-slicezone","version":"0.0.28-alpha.13","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.13","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"e72054b6a37fb44b8cd6a230e98ca83dff5ce4c1","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.13.tgz","fileCount":19,"integrity":"sha512-J2cXKGBiI4wFibK/ItnFYI2lqucIlN3/qzVTKNz5D2epz+W9xbNLNFOtl55ABt7DR0A2HkqXfiBoaOhznMB+CA==","signatures":[{"sig":"MEUCIHe3wCSLoHX0BW4wctnWkgMyCrQovC0zOjjhG2gXgDQ5AiEA0pJgBrRHQj+yxaL4RZe0KCbvmtEmgii7+3YxMGZZ0qE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuLtwCRA9TVsSAnZWagAAsu4P/AvdDZA/E2aUQtkelb29\nJj47Ogq0PH5skM8El1ni4h56P9ww80NUkq6wEc6WF4qCSadxf70W2jJ++qNf\n2YbjOa9dL2fXLBDrKs0F6pmn7AenMrIPg5uquZxOd76e1CyTCY/KH0RT7VTc\nJgxvj5us5NXPUxRc2TE3IKxV/1B3AJ9743JxgRyxYwdJcR3s6m/+E6q/O465\nKgXh8dTN1qVp2ns765mpXuJKNELRgTPR+KqPeZ2MynShAeNdyRFi/xqfms6w\nMLCLElY7a/5ZYpiSODmFi7k26BNLHJvjxk50YLG6ZwCi6+dSGSpQBNo+w29u\n+8JJxRY6FYqgyrPbwmLCiwzJ7fSyTtLOXR4Qtszo0+GRMLp+n+La12cT/9KL\nz/KMF7WT1KgI786KDD+5wmJ0pyBlYANpXBQ1YbHOyH5F+7zvtYLX8WKW8dT4\nH9eWHPi+blAipl4H+vy3vZ/AQhxeWgZ0ziyilDxIq7I3RQeI3RNFd2vrQRGL\n7pMnMVLjX9WP7hQlhWbpg3o029WMh6ruhB6Qjmgg6MbBQBaGAGZgyCO0XYco\nQIQDMCqQPncCAvNbDTUo1ZFVyH5wjM2Hnfv0EkOO6naURJXcB5Jz7GTR1TBi\nI6cjgeLnbOo6H6UovtWtuAZ2E9IUa8FVFzRP1IHPjR+xL5VFh0cJAz7+7LsW\nPGL/\r\n=/jbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"8f5d77e7945fade47caea0b355b813b14f224e93","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.13_1639496560431_0.6718725647522736","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.14":{"name":"vue-slicezone","version":"0.0.28-alpha.14","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.14","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d565420a4b4f600d370ab5beb64682fc4493a019","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.14.tgz","fileCount":19,"integrity":"sha512-qQFRkWhtBQ5pL2RCWVU0zxgnYxoiMeu57+P77MiStu8cve33Q5cuFU9CZh//AeMvOeCvikmC6eR9T6YM10Qm0w==","signatures":[{"sig":"MEUCIQCQeSuW1fEE4CeC1xKYB6y6qivkEwl+7gyu9TEW2+OWMgIgIfMC3YUhRHUL14lKkw6gi9/vWuo0Y+qDgLYwmWpQv2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhucD7CRA9TVsSAnZWagAAqM4P+gLdBHvBOqCYO79mW6i5\n4hOKfjpdYqWe52W5Chn+7kBlQtNhEb5zIENzOcDBpm4vbynfme9y/bUIBute\nBVadqjqM7nK/rGCW9b1MaKAZLyzHsSlbo+q1PLwcKiVl3bdHyKh+aYE9sbT0\nvKmSEKJH2nUTsS8BIg82XTymI0kwU8cFajYtQ6CydZ6Pl8Bfxi+O1Um8LWse\n9TFitbHZo5WDn3oP2kzXqP5BgHzlj71X7AqvBXdWdNhJcS++HhryEKLCUOy3\nmCkj7QNhlWkklRu0cjDZgBoqRarVtp+sT6VdaQO5tJv8AIsuFJHIOzZUUQQB\nPb5lnY3cls8FO/tsV1M42QAPXVpQgScbR4MJdIgSBORBtn2b+RnVQeDfynU4\nbZyyrA4TxcK37H58cI2b0bCQI046THJ3iu7PDQOKJ7iCqUbVktn1Uwn+HOTV\nxDV3cU5Nu29+7UyoMjFSNv5RxNIZlMHWQZSb/UA2ntwPQf4mY6+p3/BDhMS/\n+GfU1/qP8g7D7i5fV1rNiWpKiOygUwGHad9P+cOOs+hy1jLuNioyu4VUwy9Z\n24qAugdWQHgjgiiKmpvAPsSh4gOrSe2vMvegxoYrdh78f/4DkooH0/A9xHyE\nUfz5irIZrBg4g3iN9IniDH6YZWBek4/Ip3o2FPfAUXeZ0SXH4pkPfD/ymEvp\nreG7\r\n=bnBc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"4f0448100b3190837ebe8958784ea7981180a1d4","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.14_1639563515451_0.8975741282298986","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.15":{"name":"vue-slicezone","version":"0.0.28-alpha.15","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.15","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"5a52fd90b6282c7963e059423a93e3000bc9f7a0","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.15.tgz","fileCount":19,"integrity":"sha512-8cu6+5Xr+a0k0rJcpGJJjUDBgLatVxoLHNH0/oN0gzN0UrvdR6It1I/7zCETQJ+PsVlhGRBksr4LRziy4GgePg==","signatures":[{"sig":"MEUCIGhMxUamu/z8IeQPqHyGlJa4A2ChcEusGla/BiOpNPCFAiEAzj+DP8f++mGhle/D0rWGxqZYO+ymVCuyGYUQpFOdz6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu0LmCRA9TVsSAnZWagAAcfEP/AsEXBq+qVixqByjJq4O\n4Nks6AczLBidd4cmvFeWdPxooLYfHZ79rlI8O5BFBpqIPQw5kuAamgNxHfus\ncMkxjOy977TxaaguNm9rOQBXDVJqKiWPlcIeYt/uAV8maCYHPB9pTPorfsAo\nWcvICFhEkH9p4SLbKFWyx8jLZpLWC6VskJRsY8y+JBMxd0GMCJMvXzdETlVA\nhIVy1D9pSZMpYxlQa9hAl9BTmUeDSOrwPiPchR5tKtnN5vuK7VD/MtoHXyiN\nSPyBZhVaNulGWUuzokqVHVPUNJc0vo2EKhwshdQveXHG/pMn1ofo1EPUrdyh\nILKqC/wk6FQtqwYpm4BlesTdoWOJbhBc7ZdDehJ67cWbgrC7KwKo2i21VO/Z\nhl5C922668flnCGUYbqQTIYsf3Wjnbg5Et30DOxJW+0ymVFPOywhv6aEL4/e\nB7tU9puo2mlWFXsB1R12Qhn4vF70tqivayeMeIKGo07Vhlj2NhNLlNwyehiH\nPCFBi9kWbeK2yh53i7Cw/7pdjIhnuJCgkW2EkwNcw4wK8YfnAnytmlGoSJvO\nJ07P+F4wnSIXlF+i5EOyWzDGiOHfmfrePY38Q6/Bga/xyT7H7bmmbpLX4uMu\nJhvPnmZ+EsicSyCY9IslrN2VXatz7wVrkJ8GIkvM536zkjLi4EsXtls7Gfdb\n0sXB\r\n=MbMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"efeac16ea85edf4de9b11b162bc8062bbd550eed","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.15_1639662310474_0.702188850080693","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.16":{"name":"vue-slicezone","version":"0.0.28-alpha.16","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.16","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"9bf79b10da658053c063a0d10ce1de265c51b5a7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.16.tgz","fileCount":19,"integrity":"sha512-aTV3km+uWty64+WosZTC/c6ReiKveCEPHDJyFL6H5nFCwiEG/GxlhDVaWw327hP10CbqgAQDArYY5jQtYTmcYQ==","signatures":[{"sig":"MEUCIDt3Ke9JLDZqrd/63LuZwKV9Ws1QXblz0KeX8JoTYqazAiEAl5nddXxPsNYde0R2Vf7ZMKYm+cu55JhS1Nbxn33ZZtw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhu0RPCRA9TVsSAnZWagAA28QQAKH1Xt7+PbBkjZreAJQX\npew4dq4IVDqVVDd7Y8IBJO29dVWzEyX5smLzXzTOKNidx2Y0daOm2lJW+Vgk\nfxFsT7ny46FjBNBjX+/YZbTlGqMJPh4zkWmLydZQadbGSXWfySE9IszI2a4Y\nyKOCXYu2CJvZ0mbm7hN1dDgWl3jcTjw8Je7ZhQK/VkvDCassnDDo4Fmr+8zJ\nSew3NYOkUs90o2W7ylPR0ZfBI5mIfsoXwaj+lrgot98jphP4AVoIJ796CZ7U\nv+MSQEjcXMOdBMum7ELbis/H5hYC+VwNb2Eh8uNKatnrdz6IS5g757qte8Y5\nnXg5a7Haoj5UOFg6Mry8jcmOHSREhUTU4/DWVGbQ1vz4J2mcsed8LwPWslWQ\nznyHTV4dRlLbsKrEhKiH0yiyiefWaos4NVJzb7bxdo1sDYHPVEY5xfoDOrNB\nWDDdryqK6BjoW/ZoOLR3mKBEEkQF1xAuDlzPJ2OLsj1PiNwcBbQICHrzkEUV\nCa7xxZd0Tg+UTnqGLXYPCQei4p9y0mebVHECwmKTKU3hHwgm43w/RlxN50XN\nvDBz6nf0l1OYDUPi8ew1YpRiL/3PRWt5QLgpxaTZXBKMTUQ36lFuqi5msQat\nQZw0abmMzAjb4ufKjgp0wNZ9L7F252CIw5qf9qMC85nunPzUffI3rpODCWLg\ncj05\r\n=8fhC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"993f03aed40d0738174a30320dc78d3773de2f42","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.16_1639662671139_0.6559927171956066","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.17":{"name":"vue-slicezone","version":"0.0.28-alpha.17","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.17","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"60effbbe66345e5631a4020562e4fb203713bef3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.17.tgz","fileCount":19,"integrity":"sha512-E/Jsn84DLnz3OhERwGP5yXApc0h2mPDl9qDhBOq4J6gZxEVczzuUxeOnRIkhhvgGpyRZ0rmPy5GtZdU0drWLqw==","signatures":[{"sig":"MEQCIBAw6rZIQda6xCSE60gSzw6C0umHAqTQWb6nU3cuUycCAiAoiNLdLK5CSkz4ciRj4vHj+R1Dzi03PEuqwiKzmq39Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvFEZCRA9TVsSAnZWagAAMTsP/RhKznlWABe06QhSEcPp\n5FSMEgJx0EkTq7K9HVtZ03P+xvtjhZWDbgcVsV1VTQvGLmSiShBxP3R3T6P/\nLcb/HAH8cO6Izn4k7zfLIV9J4Gd2y3lTWIqBO+MS/w/FgqXEpFlssG5jMdWz\ng9NtMwU8gVAZUXDlaURK5kIqZjLmspxuWZPC6ZuQpQECMkoisafDrX1S+u+W\np+eIHaudo0kHoPNAnZWRtcTXajoxhjjCv+kMxMZp+6knMT0rtaxnZnJwHNgl\nFvm0hRcQb/JVgF+nCWUGL/Uqh6ts7ooJSL9NlMhIOJSBrAVpIe15/7G9ek4i\nEmrXU0srczdVFO6NWHGP2oL8XtVM/2KFB/tju06fiLIwUiwIJDpF3y1E58PA\nDGvdkz4PJBsBR1WhruFSfc4pv34GtQqcVP2LgYvoYJJ1EYzQ3t8QXW/6Lzj2\nkqkzGaGY97Kw2OL7jNrXCwn3spsVHQIY8uVS3eI4BpyoJyqSs5SEoA5pAIim\n3RNK6T8RZ5MwJJY53orLWpxIUcvGS00Qb8r5iydXYstxeAJ8QtBYGWB840L1\ncVnHQu+tdz5pfaVvZKfb0T98dMfpfrR2ZOxekGQ9+0k3yvWLIcn3t1TH4lHk\nnPqAyzUYMQzlreBmvkUhSLVd2FS3L/3oYi53zqz/2FpgrufPRtEs1+KFPyO9\n4NlN\r\n=c6QI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"446c25963ed50e7e3b6a8681236874ed8d3a9ebd","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.17_1639731481449_0.9748826116628015","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.18":{"name":"vue-slicezone","version":"0.0.28-alpha.18","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.18","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"8dfad376260e96da1dd3118b029bd87afed43b12","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.18.tgz","fileCount":19,"integrity":"sha512-8sZF5aLrQfqv8fMY9BE9b+lTmrCOLngAISv4YlbshUjFPEXIKzYIk4M0v6nVy2o0rdSdOr4ZKPJAPIay5xn8dQ==","signatures":[{"sig":"MEUCIAfIYSrElwILkue7j28VeO44SoPRwE8AVVcC3jnYxfvgAiEA0bZvR+X5B/XKAZ3A3IkVnEmcPwfl0PlBWqe4KBPx3jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwKMcCRA9TVsSAnZWagAA8SMP/0FZ13sMJwqe+W4PJ05B\nI+FlE8G8SXzRRTO6iv6x732uPNmzfmcBlTILYju0tCT+tvkwbGDCve1v7tlH\nQo3fl7z3EUNQxWBxjZVT+iFRucuVbcjoGXzfQzzMt2yu4YoB34Y0nyAKEh0P\nCkZILtx70MPIjoCbc2tSdkP/b9yO/pnoOfY0Q+W5OpK5V/siZBTjfyppUkNP\nbt3HcW/E2nqaBP/6YqcvigLzY8qDussunxYc1bTE+xx+pqscpDOWbhwJ9/8y\nH4rUN4PlPRO+3qR7tGo4QxhSMvTZOFmzPBRHfIAzB3PWH0LjJm21SCE8++xk\n1DB/LNhL1F78i/8AlMrw45nCPlDXD+FzvXIF1Dp9jl7ygMwX3HlYb/ZuQh82\nTWJYbv/LwjbDri1QE9px3tCoZb9Bkp1EbftqxOil66RfawsLSJ1EbR6RbyOL\nPjHcXEesXezuuFiS9hzxeTOcSaup44weUw/c/1UAcep/x78sRDXN/zKtenKl\nmeKOnNuJw40JuXueuzl3cPqxWCo2jpmDbLHPGA0uCBO6TssxdifL++i2/WSe\nRCqQFtQLeJhXFlrP54DVQyOJAHkuLwPsyHB/L+Tgrita16siSp7ZcASAFgW0\nE5S4Xc0ZciyItvFqFO7RBcDnCM14+Or4cS9CyOtz0YdanvsFXN72Q//WRWiy\nUzCV\r\n=Z2rE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"bdb5c497f8761730b48d884827936cb1a62b23f9","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.18_1640014620439_0.2995138807512576","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.19":{"name":"vue-slicezone","version":"0.0.28-alpha.19","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.19","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"c1605750e5efd25662b7d5345761bff10202a507","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.19.tgz","fileCount":19,"integrity":"sha512-RplhFsYNLS0u0IZLpSVgyM3HmmLbE/+Ua8myTyVqBFe2f1qEQEtnFEsjX7qeLjZ2pewqLnVI4bKcVCrPMc4yJA==","signatures":[{"sig":"MEQCICK3D2FYZrkg+SQYgUDZqVnnArPbAyYnLJC5u0u40p7JAiAVXLkGToo8H0fyeXrAcicxE2/CGvEIsNQgj42GOWTXYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbfCRA9TVsSAnZWagAApbsP/30RnQPY/tIhWmw5i2AH\nIqcvFvoQrkBZlOBOH25xwBKdTD24pqd2dzWkh7jbs2oOdniSzX8/0XFTBHu1\n+Gf3Ki8iV/azITvvDx+ui2Germbe72WCV3RPPp5s2+f7uvoFZIjgBn0XRba8\nDSb03ckxFmjBh2jbjFfZcwa3QnZzqUQbIVgb30At6pn2IdBWMLJtIVxHprhm\npnooB6EqakL4pop9BQPk81n54pbvpVZ9+leiE7nLF0Q1CmlMZJEQ2kwLvxFE\nre7ky1kQyPMxcuWC0PZhh46nIShd4EHCd1ISZJbdbz/pJItfM09zJ6GC+uK5\nozfFGYi5DAhRfjRsZkIzt0eWq8IxUjOFoR0UDH3TjXBQrdZd6yhbp71P1Rd6\ndcx/W6nsudhil7RwWYKpaITvX9kkY8hVGIIUwNc7Em98r7U1ZeHdGGoN1KEb\nUqGghluJabqHx9OWUWGghetI1Dk+cuT5Wf8+sX5qbvjfOEWKjBcez/nMvPtd\ny6SynhcneIEHpahYMDAATiBXN6OWmpiv2F/kfJps5oXTbC1sWl12dL1qexrJ\n07XKAhAlROENrP9D9U3rT5l8/xLx1v04yV5TmfzSBg6w95UvKUxUYUzQe/Mx\ncwMRETNYd3iaAYuXtg9tBRrGwKlYV8WoPyDy4GfBzOMTkV2SPO3ykBsjm01B\nZnDI\r\n=6zCA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"1f8a026d2c4b78623a5023fc0634094cb5a723ce","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.19_1640089311004_0.8066534661185447","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.20":{"name":"vue-slicezone","version":"0.0.28-alpha.20","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.20","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"10fd76ce8035980f90d7370503445872429c27db","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.20.tgz","fileCount":19,"integrity":"sha512-p5Uikz77VJytKVDqExh5jNN4ChgVLb5DAgGNM70GECqWfRVUHE4HZCEP2TzdEGtmD0Lw6C/QE/9L5sBAWv3T3Q==","signatures":[{"sig":"MEQCIHLTb4srLoOueh9MDIqIz0+6KYO6lpFj+7+xkTx1A3BIAiBquC7uA0CmC6wp/lCQ61McO8r3CjhopyhKhQ6SNoC11A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwwHLCRA9TVsSAnZWagAAKs8P/3dl+mm9s2l+sQc/PzCT\nKNbmfU/Fv2zRm/mflKMsRkVRlmmXFWoPPZVPifpx/wwMmts4ppFtebn2HAVF\nf6moOxljZk8N23p6JCnZG+joVu7q7YdSV1gSUpMtvHZfWMUhS3PKiuczzUeM\ns2AP+zUJlVzTT9eZQKUL8on9I63yN3quyhIFgAAujsp5z/vJQnH9SDz7Mjwv\nNgKsmh2PiQt7Y/guGiyrGpwmGmK9Oj8jmSZ8aD/hU0OC3F+WohFx7sXkGQiQ\nJfo8KNYSKlp5OZHjX3012Q/OsjfexJvHS2CBiwLAavgsdzMOhoBikow5wsxe\nIYs7+nReFRGcwkMe5GIIMyE4yRLlvPNr0meZZl3vx1UJO9CpJeL7aKR9vdbH\nDY9Ywi2RrqOeG3EeINBFsaBitpQqka+8PAI+wHtyU/2Wu7WCrYA34DeLbNjc\n8MEDDg+mEoEaVgAstTFebtb78HFIoMM3SBCvOzCJfeLsgoqIwsFWNIN7bkUU\njDsmLNYR/l2daTmexBxCecvjzaPW/Ad77sU/Ap9DA8qbDoQjY3UFQ2Zd2PwI\nmWg8rSzmaEd7Jfy3/wwOc/9KGn4f+24pVZNetd/giFHBLMdeDAMnfUB4RkYR\nvI4ffeFCpOrl0d7X+ecMFvnH4PeOIAZnmLW1aE8pDgVJjNw0MMSVlU6Y5ds3\nRhqb\r\n=SFmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"33e61636a5e78e269aa89a67909c8eb49f5cbf23","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.20_1640169930814_0.9489387386653338","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.21":{"name":"vue-slicezone","version":"0.0.28-alpha.21","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.21","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"4d4539d49bcdfe8534a71c46182e04eef3e864fb","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.21.tgz","fileCount":19,"integrity":"sha512-LOK29l5DO6Z6wQYOdE0HOSA+quKFhrQmtmlkBiv+x1FoBz16s0MCduN4VsGviBX78Wz23mPeVrr5hLBdrkMvww==","signatures":[{"sig":"MEYCIQD19mY3ph73VCqX5G3x4zGa2wGtrL6cboQ5dhIVNB9EJAIhAJUe8OMf+1veiUk4EqdpNzD9Kxdu3k/7aNouqWxcKnFg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwyHTCRA9TVsSAnZWagAAmEkP/1rQdSnDc4pyPyQnMjTT\n1MWmbwRiW69aiONLbT9is37W8Tmpi283oxuKuBc/6olenWD2ptRJVcZA0QVQ\nOfLbbWovmO2yABxvCbvo4QoEyEyrXQnxedipqgnaTFUhmSNmrU1UZ+ucGbCk\nVQHXc98lIS7HQOzjP1mIk0kFjgycL32C0Z4rpnK2khNps78XOGO5IhAnF0bI\n0PN6jid/8LND0b7r2MnvhjLWAwPaPRKteJSIvoII6bO6y/VB+nXlxD+if5zG\noLP/2AgLS3e2woPaom4xv4FVna94YjYFzG7mN2VfFZ1RUUBMCen4qHGdkd8b\nKxWyN1EPHSPWV4AwbjHTfk3PS7qxcxzwWFQG8P89955exRiU4I5gEn0GBTC8\nONMr57D2mpqk/Bj7Rkaa1mKWy0q7GXMZm/qUHGsxk5HZTSBA7/uymDD+hmKX\nPWpOoIsUbbbERPQ4UmXa4XRYBM9pUMYOeW2ckZEUP883q/KnIP+2qHOMzGt1\nTjkIrjtBug9qjFBP39KhJVD4ahPaRWQz0fcDB/ta3KtkJyaRHaKmgx4Ykyel\nDCcf+NWb0XlHIzKIJalOD5oQL3lCubE+kr5QAXmoklo0osM44yNPCRtUK7tf\ndFwWl/sdgHUqUPLQRVoq8zo28dKV11dQs77fUDq63J8vUGGGp0kUCKsJ7QRL\nfv1k\r\n=2OML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"974272d145b3a13ca436fa5e6e57f28228c83144","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.21_1640178130757_0.9745178318020515","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.22":{"name":"vue-slicezone","version":"0.0.28-alpha.22","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.22","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"948625b55c5c10a6c4ca9df6aca52065f125f39d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.22.tgz","fileCount":19,"integrity":"sha512-Akpt1JQts4cuDZ/E/1XpOozX7AhhkkJmPhv5DEyN9la0xPnuUG0x8HvOfogb1lviHaT9IQjp12KHEglB1/X3Jw==","signatures":[{"sig":"MEUCIQCnQcCGTtSGO5CoIl9uuaqulRQt7uUrlmzFlVD6zcHBhQIgUelxUS8J9T2ME1kkHp7vaCRgRbqQ+Tk74/orI0YQUIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxKc8CRA9TVsSAnZWagAAzdUP/RVQ7mIOcjbCKx79UNXz\ndGPpqyAtT+95oNuT+FmnlBMoBEhthwFTzPfarr9pAuH4UOb994yLTJxPdaV4\nhM9OgvllueK8vcxmLk7IcXPbXJYIzuboY4IAepN5sDXNXYDQPB2Pw/+kWITP\npc1qhP/e8rnxG/8914f+9VwQfQfpQS5X6YOrojyP10IuwKdUUQX+LFTW1qo+\nXw3H53rFCRConkMIz4Pq0BeyUObelbXPTVXmmXqqkRR0Xn6CDdKtYNiK9Yp0\n++uqXgZzCSKLgTbq+CiL15UgQ5c76up4eCx8YfEcUNhTE5GD8njY4+nhLUzu\nFQNb2UMKhDq7dpJoGQQgx0n7wrfDpclT+TSCVPKe0f4N3Ua6rEKrqrlwVn+4\nYGcrW2ULQc4MoV6NZQipcqFf0okVDuSKCU9CE3ktgV7An+Am5z3z6ZmqGDvg\n+dMyVhgutGKkQVXB/D/VM7W9fgCWvEH5sUOOyvOIoEu2lhpIvM33vwC83BwS\naJZZfLNWTvhxsxUV8xyTkOCoSJ4mOTaolGg7FwOd5mEA0qPhWwJtQ/e1sA5z\n3tgNfaS5dFIEjUedq8W9xS9R/brP2jXH+KunEPzBPzSLwN9haI2rHWx9tVJs\npl4cUAt7WOmo22kYLdUuCd/RcAnI5nA/XsrRTHYQlCiGGF/DrSggPCSXMzhb\n+aQx\r\n=MTnc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"31aa37f4aa41a661cde38781f3d5027e54d01cda","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.22_1640277820373_0.26596520737066465","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.23":{"name":"vue-slicezone","version":"0.0.28-alpha.23","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.23","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f214adb14ee004eb172dc19e93aeda53d5fd037f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.23.tgz","fileCount":19,"integrity":"sha512-KdZkikL27gkifWBKRBwEBYilHIDGeQBD8GQAdYVPFsiDAegbBhR/hmlUtkGJvCI7mtQoLdwp9TdqqqXSbvrwOw==","signatures":[{"sig":"MEQCIGdDFmoCCOgQoj7Jk62LLw4vtAKx0O4MBkTe5iUh4IYfAiBjf/WWz8t7pjPuSokjJY52Fwu3ckPph0nFIL//D75jBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh0xUZCRA9TVsSAnZWagAABKMP/38tz0uYMdAs3dVAhFLz\n22dZJMijdaBzpqViyG2LqUTkyUHREGb1p6lek8TzoWrNmOHUfVBW4bVr72hZ\nFT1vWfI+v7Xz/Gss9zVAboDxaqwxaR80SqhVRT/2/DZFhaWUPGPUh1bv236a\ngXv157YGjByjYbUkq0F3cCHzTRL3BKASOq1nlP3loqW+BULVDL4m56xEt3kY\nCwGwH+QVy8EdycanwuGjzAefdG3JpfNK8PDrAFvCG8yzxB9NHFyiZkDA4aQY\nvwVr4ef9SQYbopeSXHgoS0l44Wcb/XY1YXrU6EGayWUgnC2l/gB/e1209KC2\nCUhWD7gTn+osx2k3SszwUL1Dka3f/4TIi8kcf4f60NjtnXoI9fXaxr8rrJU0\nwpo1Ll427iANh6LW6fevmAM6uf5ofuXoosC2/OUlucFiQDwJ6HWHiTxwcT1S\nLgN6M47/0XwzZzVyf/KnPEg04TRObaTzBENQFzAlv1f6Y9TFzN9iJJh9wZSN\nJj11QD1LKvGdzruzRzvHOsf8itozxeVikRC0RS8Y4TSQh3H8WKMQ7Ul8nKnO\nuDoTVmptK4FVqycKmv1qiZRfJfR4fK2fznkVfJwPOdXWCtSBlCMEsoMvnnZG\nDVBPzLCY3dVm6/KYv5cUkFyAUjnoK09S01sHkQoallPpJp4RPlUgqPB/s5iF\nqWgE\r\n=mUuc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"60cf17d6c9aed13d3c23fa97f338b8e2d91857d2","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.23_1641223449080_0.5745793799097862","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.24":{"name":"vue-slicezone","version":"0.0.28-alpha.24","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.24","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"e17de95bf060b45589b0b9215a0d98a43f1ec17f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.24.tgz","fileCount":19,"integrity":"sha512-ZDvUoJ8scwO6ryomIr+5xpAbQvZoVrNCn5qI1PaJ9lmO3xIpRQXD1WHo3z28OsYzxrvINliYbZkdhb6qqXzszw==","signatures":[{"sig":"MEQCICd3oE7v7Iy5Yxc3aAHTS+wYa7Mzl0E31DDPwAW0rVXiAiBEoFmDWh8k5OqSSsac1lustoLPZhF5ZUwuXvWhpD0bUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Hs1CRA9TVsSAnZWagAAN/AP/0eguKLeiTNEhbNa46wC\nqj1df9xMOpuak5dMAL3C1OTT/EpLUQmV5wxaKXOx+KI1ZZULHycmR8G6ysLD\nLSi9nZu4a+dELhrju8gSkgVnUZBtiEZVVAtYQzoW20Wt3kvrokBkijjf3n0g\nf6a+IEZq6MuxFmSUIkaO+M3qF0+4Th/H8Wj1+9RyI9o/R6tErEttNAlWXV2/\nWkWOEwkxp6BnBIdRfYbxIfJANfhTBUAnoGPQogt6CbNyxCAtKMiWXKeN4okr\nkkb4NfM1OgPHjE1G2B9qc/21rmkQq2kElQK+gt32KRXy48FGfSIynA7IUmRV\nqs0B85fKgbmstHay+ysP4pqvytqzlGozHBGdiFN79JWSd2+hbEV1vW+rSQ3L\n6cr8Ac4miG77EZX5Dis/nYI33RJxH+mGvm2TkcfFMF2DDTa8+HHryhlNvIc0\nl5Yti/eN7mIoM55opumC4tqrT55e4T/QznTtmGWd+WQmyUrlnZzm4BQsVEpt\n1PBwmE/q+RPAVSlN1jeus9tPWyXbkJdbp5bL6KvQLEFiMSNmm4qwMN0XLg4L\n+m4BUzap0Dz6i4j3IrN1RqQr3beynwQnOIDMiXTTf8ST7X8FafJ6nyrjc0eY\n1mvlE0VYcWihlKrQ7/hyeU+DG+S9n3p0dFvpt85Mx/clMECk6kB0+uS1Vgkv\nDPaa\r\n=FdRU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a75667779948b67c4bf0d366b02c8f7fdf7d3d2a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.24_1641315125790_0.7629059905370177","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.25":{"name":"vue-slicezone","version":"0.0.28-alpha.25","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.25","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"0526713f163b96e515194f90e1652c0676f25c3b","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.25.tgz","fileCount":19,"integrity":"sha512-UZr0fI33FeNKVKPhqG/0rhNx0Kx4AhKoIvemaYu+O5bDBEImA5MCpXBtEMf4naBf3XRJXUCLgnbWV60Rys2AMQ==","signatures":[{"sig":"MEUCIBnMgxiqL8pKpoZoXj8areoKzEBYhhq08soa1S2Ro5vZAiEAwOos5/I2jnB3X9P8zQyXsGzI+AfoEXgU7NHyZwjNRPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Ef5CRA9TVsSAnZWagAA3aAP/i8lfEqXKwfv20v8xEb2\nNqRkQGQ7zfNtmSuMmb87/zGIOKHh1sg3/IuP6KWo1RMcp8zjOaf+SoK/yRAx\nExBWfGZdijbA4JE4UqE8kzHTgEB7gC8EcmpFVjtuUaebWK0XwD3DvFp8Snye\nqNut0oN060jLHDZuFrriWxpCn/8ye85mlkT29llEus0IXOv9O1oUR3f8b3+e\nfKMdudRFNCu+3f9PSJgZm24CCcYHNDakxr+VFJXXN9dEwAy+HYViS0q8+p1y\nrgkQ4idfObYEM+RXrhlUOdHafmSAavuoKEl1gL1l/tAU+9cnXnWPf0OjSY6T\nE1XjKV5I7RTNzJLnPzGzzKl+0n+S8HPIqBuN/XUxwuM7ZOfJ4kJMBLRtkyqY\nHYPEWxr5UkVDqjKeHCfSzyJ5yeJ9UCQA3geRmv6BK4ZiZsVuKIkJ9IpvTs94\nZfsTvMGrWs2ynqTO56vuOlhf1gxuWHZczx6tOYa/co4BMsBgMXJG7r2pyXhy\nprIf9fZIUmiayrnWaC1LOPzZLnqJSi52jiprVNwEub5mQzjzOYu/fPuALN5Q\nW4M22mSDgC9+UKtDJ1Xlc9/AllmEeeaaph0eZGXs05m21FYxagu0QB/XdAss\n3X+m25eAfAtGDbCPJQzaG6cniBqUztfePgIqYdh9YiSMLXMBsGiLw46IvZwD\nUNbx\r\n=m9ZC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"802d151e175b3719834f97b45a7871083b96bfdc","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.25_1641826297137_0.02024627995738504","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.26":{"name":"vue-slicezone","version":"0.0.28-alpha.26","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.26","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ca3b711c680e696e57cc2f7d59338db5a3cd3406","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.26.tgz","fileCount":19,"integrity":"sha512-vgcuafieJRHjeUi+Cx43MpX4gPfNTnaHJr0nAzmZvoWiRly5tzeyMMutW+DHdPbBzc1cbiwQWSzAcSPDSEBcLQ==","signatures":[{"sig":"MEYCIQDaHD1Pmeo4a9+YFh83Pj5WGpNNv/+M8MKyKP3vzK3i5QIhAO5l7hjGF0mmSvlIiUu+QriUo5h82KALxZMWc0MCCctw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3F5SCRA9TVsSAnZWagAA4NQP/RSYUikXV/Bbz3eyMpb5\n08XMD0nMUns3Y8rN3VIWT59KW0l0geGjrUt65eGVtebpHKDnEYojw0ObCwYU\nKvxGoha2su+Gmr2uI0CxThjgJdJ3rDZqqqKksnxVGQON07MkWO1jjrtOkTZP\nPBkjHQEFiNGD8Mdn9D5lLD36KzULam50QrHmv88H56nUcpAbCVCs3EM3L8si\n37PU8tB+EOEspqkKm7U+eCQV7sjRSJ4vrTmUyVisH/C18GOlpdOP3KkOLuBS\n6IguZ/TdMCAme+sfUytN3OoZPyC17Q0LnChQNh4xtnT/59QyiCoNbEEvaFzd\nJno29pKVL3vbk7qOHPw7PqSlI7nV0TTKhyPFzEqIDkx5al3WdG8f2uMDfVf0\ndB4x6WvTgTLVepSIS88HoLGoYJ4hO2nT5Gsj+6AkOSJj54gPW9QbdUO3nLp9\nK0h1o/lW7lj4UvDBEUs9ymndwcKoqxNOBHZudB33Vv1d+LojAZWq6mIlmQxs\n0RbD1h9KIBKfRRrdLZWZa1Rgl/jCKgx81JRzhpFOfxjwumOxFIw/oFPe9tdX\njzfgrFTMdIfbwaqop2WyrhiXApIgzYEQA/3dKxZSZGjLyWQu8T1zLpHCR3dR\nILzJXplswzTW1tYoPw97/OzkSJ/C+0P2Et21IESOJMhIsqciSim4kmTrxgEA\nqovX\r\n=1hjH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"59640bb59b9054e704aae588317aede88971f1d8","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.26_1641832018355_0.018816660664686458","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.28":{"name":"vue-slicezone","version":"0.0.28-alpha.28","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.28","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"8556139848d14b8c8ead31ec799d3c23d96b1304","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.28.tgz","fileCount":19,"integrity":"sha512-yY5O82gN+K+EBEkoO7XG9qHpxs1V76o1HZM/1HUUsG6zl15LXduJuIhQAldopiyk/7WIO5tBHEi0QvgmB5F8mA==","signatures":[{"sig":"MEYCIQDJvnH4esdT9s0vjeVAoT8IGuINvg3HZ8g7TwuQcRJrFAIhAOenebL9olHD6omrThCXsPSlp4Dq9zh2idcnBCaGD3HU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3YesCRA9TVsSAnZWagAAUVcP+QH05HMLm2NzC1KahT+M\npbOMHL6KyMb8YoGO1SuN6QkTwrYjbzwX5OkjqtY7eyg9rcm4IuYkWO1c1T24\nJTaftdvmdsDOELervk2HXjo6Zjc1TYEczEiRcDm95HGyivfgXCVdA4Pzzjrz\nelgYsvvyACAqxf5tciJd1mzoztXJb7dpMgsxgi04oBd3PNVfIOnfMvrubgSB\nf6GO6Zex8eIgT7vRiJSlsYN3pOpQON08o8WSRf8++YNzNc93HXdcUnE2XxOH\n2Mxf8dxKDDred/97fX0Skyr0RUKWcF/IN52TuV51VUEUn/wqmJ/TfZ/lKyPQ\n+x0U7DFwCr4MBwO2klyiMAuHEV72mxe1PlQpxSIk7H5Vc6pyoTfpB+/zsM8w\nQnjq0zZU2YdY3M10GAzoNHnMoOe4PtcmWs+ya58J+bb+akVJZXz5jb1UIeeU\nbVTgJm5EEb2WA1a1NwCsxxui0EYHCfEiyomF0661p/CkkEg2Q+L9xuNqM+hI\niqDGu9aa8mGOGiBS/l2matOUesZSlrZ/W2bKAVEWCUUSwLEXtYIoIM7ZDyBO\n0742FBktLXzNT4LGEqMO+kHHPd/+nYhpdQZ1Mg+FSHTapodAVIHi9gCwqRbi\nV+HMfK4p8JDoAy1J6FCxHvs7vxDpGqhUzU6WYJjxgGST1MOcpc9TqhCNef76\nePVO\r\n=IMl+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"18638999bb4d887f9038543586232939bf838f42","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.28_1641908139831_0.16474689997754277","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.29":{"name":"vue-slicezone","version":"0.0.28-alpha.29","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.29","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"76ba8764c9a6100da88ca9649a2855396b4c8d76","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.29.tgz","fileCount":19,"integrity":"sha512-1O0ljQJtZbnuKb72HPYWxfpSbm6Yvya3RdgOWsEzzuPvDI63DDIYrA0xeF+msf6Q35K3VjyQKhFnvVQrUOFxbw==","signatures":[{"sig":"MEUCIQDJMZoGg8+G/ZbWUyc9crQ2rTIX9CZN57ZetY58m1NvyAIgQu29+19nKsek/+2yHr7YhP4hkLy0/Rna+s8vvbuGx00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ZgkCRA9TVsSAnZWagAACYYQAJweHRq+/cmMvp+LnEAi\njF2+zPfgGRX0HfCOkxl9T/XiUODZlA4ztujo+IOmnFO0E9i32M9CBzw20+zb\nWmQfoWtQfHAKPg5t3IKwoA5SnDWEw51Mf7bzZjb9k0IWZpFitavumurJNhXT\ntuKIjAeDIKHwfzzo7eqVMyZiUcsY1wFgD//+nXruG/mzqZ6zaJ/FC+HXPCqx\nw7Z7hTg/6NYyZXVrZbyoOqvNemM5+iaaM4RAA6vW9kygbd43mFMJt4gVQ1vE\nDNG9MKca+YWD8Z1NYWqILvEuPGOKu4Slk6G7uG5gALOmhQHFvp+qh7qt1UAX\nHetf+U0kGa1LRh3jGW1CwjW1jLv3Jpum4MdWeXQLodKIgLghyjlQcg9o8rbi\nDpfmqIuM7RiytznBTCGkaL+2GkZTu2V+rpNVFXqQXrJoV+/Yc3NJyjAKopQl\naLCbU0ynkmgMQ4ByTaEs/bRWP+8llFle2ZExw3FK/BmcrN0cRia4iSdYF8t9\nUuMgC0Ci8jYjm3NPXi8rABah7QThlfxbCvDEenH7mMiwNO8njE2MySqkisP3\ntw3P/ZAH8RH834Rwb6h9f8GH4/DlVw14bwlj93uZ8/lYRAQYZHbnuvBPbFbz\nepd4TAZQc5GS8a7zv30eVhM7svfgwDnDakF0YLto6iGs29Ex+6HBeap0jfEL\nbn+Z\r\n=3gNy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"60187f3931b502e4ca34afe0ddd7a54a73ae4647","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.29_1641912355579_0.11934199548323199","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.30":{"name":"vue-slicezone","version":"0.0.28-alpha.30","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.30","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"01c4aad7c2d173c97d6473abda05f7ca1490305d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.30.tgz","fileCount":19,"integrity":"sha512-lnB2iOhQBVcFFLhffv+GhvZGqyWcT0DqmqA1SYZw9Cb5gZQteL354xYj27Uu7F+gUlkqRmbQCP/uUZXxYz/Wnw==","signatures":[{"sig":"MEUCIQC5/zXCa155Q42wnPq+EWuvm9J5hVQTesD3XwzapE6xAgIgaWyYCNUh0Yifvts/121BJvTq9tTBcUvbWvHI3l+3qYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Z4qCRA9TVsSAnZWagAAoKAP/jq8fkfWfvcySe7ouR9i\nIvhy+kaa7xGLtGhsNy/gdYdHMfrYhqvzZ05Th4nmhFTWNiBGRflnTJmd4CV8\nWuQt2nCrCG4j4OFm6kPeeXVO78Xti9NzLkRq2ZivgZlA61Ea9AvfWTF1oP6j\n15Kp122CLN54R48ZrSa20B3ZkDIT06zjSS7M/lsBINY/iqDQBa4dshWrjhqe\nL5wJf4W/4ZHzwE1S1aLilep/6cwNmNYxal1Nkh8jm5BLdKCKB56donDB23KP\nPYSIiseE1Cb2N/ryl/kJRmoImEnwNDLlbg01L559ZucxgT/wTAI8H9TucVt5\nJ1xXqlunaHtKlx4DKa1h/WdEE74IGi+SfN3tY2n8KBwbBAfyqUCKsFkV4T01\nZKa0Djyl9MPcftrfHveBRl3LduEr++zCXPDJHo27uaJY4S0GMvvX3YT2jKcX\ngMrZrOdYV9Ut7YaTxCGFKlP7txr02HdxTBTf5mqERLhfhXqIwFFGh4zFPq8J\n8qfQFuBsOuzJU7dTGDmjXa6CvBXgKSxEW8lTPnZu0oi1nKyAd+55M9HFzQ5l\nF2cOHpCjsrlYZzzSa4Cr7yvyCqermnMId+NBVIlw8IgydgHGRBNUDOvjdvjn\nQdLhNffnn5SSjrrXFh3Hpj3foRjVn7xszYs/sqfppMjGG8vJGGPYJqE6Sk3o\nS+fr\r\n=WTql\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"799be38e2e03225c54594a777686dc4de7b4918a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.30_1641913898506_0.23352536682630598","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.31":{"name":"vue-slicezone","version":"0.0.28-alpha.31","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.31","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"24646b83435078add50aa8274be2cbe1b40fd691","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.31.tgz","fileCount":19,"integrity":"sha512-UT+c/q3eY1+fXj96v95GbriC/pNUHn4/Qx36h3TKIe8d4CojbRPFdxT9p+F+/F1d489OyxbnyqqaVkskyiwMrg==","signatures":[{"sig":"MEUCIQCL9oClVx+YclpcY+n+pPdRlAvGGT4yCXaRogtpbwoCvwIgUawlOGYDY+0Pdpd0aoBN/AQaA4HhWEFd+KSSMq2ugfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3rnWCRA9TVsSAnZWagAAmHIP/07pUJ3vNiyk2IXfNf4t\nkjgg0mse9fffm/GhK6flIx6B5MFuFosJkB78LEvtQyoRsKqo7YU9dELgCmMS\nDGmx/OFqyDnwUiifUCY5or6MJ0CHsR2Nl0Gcy36WtkrKPzHqHHQQyqqXPeDh\nATPgebUHB4Z7gqhbdxMTHtgGhwZ4VHdZ7b2UecMweWNBL+tYOcl1BRqJoPzV\nJVIlHQ1ASiSoA22kgJqC4teRts1iKm11mCBXWRnytyCsEe1ITE+K3cd8ecRz\ndZczehQNy39Q73aC/nIqVTenSCkzIAEzvu6qV+eCiWQnsxoLrgiwgVyeYVnz\n1VX9/FKzy1qZqcAHQc5stHRKa1KhaxOqkFHf0FuyFfRR/IQZyqhFIJ7FcJpC\nLwCqk54JlYIA054kAAe+t0Y+dr9fJjhEvqtQv5jMZNiHhVV6TPqFyRU7Ah1F\nWCkg5bhRI2YiqmFE4waTcPfH51THju5v/2rRZQ7XVkJRY0gjCdlbx2qlB1ah\nJlBJtgTaIXgr8uUjQrgtFPISZiFRFUkRVoHQMxpG1xGHcLaoO8CoOie80dMf\nvToJrnAFP6QfCKtfUSOlirXxX1w5jqR6u6hEaFcAzvvP3IydeGbV7BK5crmv\nNPGYHX2elUf+eIYBQAHpTDUyZ28s4c3bzU+562zti5cwhYQ2XZYb7kkDGweI\nVIk2\r\n=EeZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"e5882f702eda78c0253302c6a72b2bcb9cfe4093","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.31_1641986518068_0.2623372044751322","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.32":{"name":"vue-slicezone","version":"0.0.28-alpha.32","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.32","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"72bc88c161d0647aedc0d736a468a21ceae8af21","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.32.tgz","fileCount":19,"integrity":"sha512-dyNAsk9bKbfPYaz+cOL3t/CN9OAoDcSjzGsXOIx/TvUPxFmOPv17zC+GQedLXZFLPE+kDytlniOW1rRqQz6Hiw==","signatures":[{"sig":"MEYCIQCtf0YvXYnS5nXhFoSsJpW9MIG4kljLhjPA0Kb6FIWiggIhANC/o7X5nkyl9WHF0sMsEdI8Sz0qswtfShth5jaQcTGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3u87CRA9TVsSAnZWagAA8BgP/RFfdNGppuXeyHEVqA53\n/VtcqUXwVpCyEXMlG9ouVQFpg+e5DY/VmrAkVGEBytby5NKpclF2Utqdzm88\n+NuqJoYOUC5HDLPvg1jTfPCkYvIB1anl+yFiZStidzhjdwUJagn0CgRkVzfW\nQOqMoI6XYeOuun1G8qXG90+YthuOsRwwrQbcuhOeR2/5GTmYG5WWWGR0/DLN\nbKVtD5LlExnDEWvZQrhbXE0pSv3FdlGDvDMt3D6FW0Do40Mij0gRiHORl7L5\nIEIs1uBwmS0CgA3qCNylVbEYtEERmynA8iEkysib5kFVsg/Nr1pBvUBlQF+M\nijEh6wuwAlSM7n/4HzP4xHuFfv7R5uI5pkXiRFXkjRGCbLhtXdxCVE+01ACB\nj1OyG0UHIhfbpb8vsD9rrSzE/abn+Boa6iMP/JolpZdAs1AI9BYOzwt2zxRi\nzaED8gftNVpct4DijErSTJJ6FmO/MRzq2k9mcwzXET8zBfeBu3ZkThkK/7GJ\nKZeL2nRCJjuJQKxnD5vy6iqzVqw77esIQ7v4yuEe0Hp4SYfU3dpzZWJXmUoE\niFll8taMfTI1lFcznNQA/SrxcMRgGyn9Hw3IgTisawyj9FLntda7Lx433yJi\ngEKKdJh1swk+EeUWB15yhTRlljBQ+lLlQpbTFkpwmEyAqcjJIvPdvK8TLt3R\nc+xR\r\n=xqlS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f0d4eb7da6b19f9f21701850c86e5437fd1998d6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.32_1642000187392_0.3584889177556829","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.33":{"name":"vue-slicezone","version":"0.0.28-alpha.33","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.33","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"0f96ff6416f2ae9241b9272355f30a8aa5aed008","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.33.tgz","fileCount":19,"integrity":"sha512-wpvHMvWzjGVfVE2UrQfcTJ4hYUaSmVMb2BLm42L/FX4f2ANqHWIvfRQAnjsw5+7q8G5v8hG/Uk4qH6C4zeTX9Q==","signatures":[{"sig":"MEUCIGp7nqqu2s6bS0DA5fPhM37pm1HBUhL6YDTG+VcFlyQtAiEA2ayFw6UfqqhTjrq+1vS7zeQGq54w4jmxmuNZtilXunQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3vO9CRA9TVsSAnZWagAAT1gP/3CFpU1Z3rg+eRQySUHF\nXIY0GtEe1X4LHH7B6HoDhPzeIq2L/Ta1U0CnxUHQzD1wmuWPztYUiDKDF8PA\nWDwWDCCRqbrt42IOYZSks/ESfJA75EnOz8gIcg8V3kEKiW5ppFnLfcBxoQ4w\nJymvwMriu9mZp9+xkEVAS93sDcAUVfs7T5Wz+ti1WTUAyyitQTQ89Ojq22NC\n4duD36Q0ATNpthVqLb8ailmoPJK8MccplbqnGhYmtONuTCSdbuHTevvLHleP\nXKSnqVldFWPV8/WdhaTlj0MJL/y149pXBgINcctAPbJbRrTmMLRtucRh3j4k\nlWH8NKi6QxkYGIspFgQpAwBionKf7FaVuhROyelveLALRSgsccOUX0ogAxjW\nNSGQ/GkjwbrGLfajPD4LtZvyITMCnFCVo2M8N+iwybGF/KSLvhfiur9ScIUQ\n6uuIj25eVjFmwPDzLHZl4kyuCnCkYZw+uuaahCwA0N/KuZn4r0Nhg/xWCGZV\nA9Luxj89i/zEprv0ysyvk3ewV0G9vQDTwZcJy+w6oLStaPi/3NMCUpG55T3d\nS+AaSueWqB/g1rPSiNv3BXAp/ibhkb3pA07fYPHlpiFNi/NSgH54DYcn40N+\ntdIDoIjggI/tURfS9vcDpmrWCXnse/6Y+JjxjK+aEqN+HpNgZz3hbBuT6RMD\nEMiT\r\n=Ot3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"9a0380ab52178798110fd40807c843399ed487a0","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.33_1642001340622_0.7381030924847547","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.34":{"name":"vue-slicezone","version":"0.0.28-alpha.34","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.34","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"562c17f72d784341036dd31b9cc3e9c43c2e189b","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.34.tgz","fileCount":19,"integrity":"sha512-KB7zdVtGBs0jNI0DJBJwyfb9QKT4apb2+I1Zhf4BRwlhgJmceNIpNQffqo6dvBIH7CeIxyMs+0fypsBwm617Dg==","signatures":[{"sig":"MEQCICx8IbUQtyiGuxIHVV8wfE/RG0OTyFI+P925/VZIaNkOAiBU31+oe8kWIPRNIrOEc6uVJT/F42XCgAIbOWQwFsgY+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4AjLCRA9TVsSAnZWagAA1nkQAIkRRCOiaixy8PgbGF4+\niFZ9fO5R982MJ9g4QcyxHCIkt31+okZb+bUJhAHLvKz2J+fzowA2HkPsEsuz\nPa7PvgrqMn+/p328APYC7dMod7/lUqatKdc+r2VRJpmKrc7wrWKtRIKIGYzG\ni1t+UjRJnQMdte2FGpPHAJHELhzJ+vBQXkNtsBGmvp9xEHQIIq+lctGMNUsP\nivSQmz3nMgrOkyonMVzR9VI+aqDuAlTT/3+acg8SccElAgbFfauIjm97z1sx\nl4ochbukaUubQcxwbQoLa12WB9X0uv7H2h6kQ5jH2MQsB8/TvpGZkPk+psUw\nAl9GSCRNZXW+u7/i56FUSKhE+2sOECOZtlRiPqaJcBf0jLbYbaEJ5MJaDuML\n5JgANnR5umBLqoLYrpyS/Zj20UMjjYCboq4oXeVY/DiWosAcyMdLhhjaUVxB\nYQsFnXFSvUJ2gwO+wKJfOF0ZgVrV316Nt1jSL6KigtD6ckwoylfnhD0f+kW6\nNq72L3Gay2dimpc4MVic+qq3/CmPPLdd+ulghXC5VbJrDAz56FHgsIRV67jd\n1IoEGcFKcdgHxe2JDlik3eNV6SmgGfcWkw+fWj6O/3CpXwLDeZVdkgdwDMGF\np1O1IgLbhJ7TpbwY7W/Q5e++zoArectCCjix3Q5j4l5YoNL2949Qi6FhWAdq\nkbZl\r\n=NSWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"c41c4519254136d53caee5b6869757eae59345ed","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.34_1642072267269_0.07391934910342912","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.35":{"name":"vue-slicezone","version":"0.0.28-alpha.35","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.35","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"211d0df6e15076362bfb63702d1372b140018932","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.35.tgz","fileCount":19,"integrity":"sha512-CqNTpfbOd6+snObc2Bt8oF5BoHEEjTzzZ7DehwfsEGLXpnNjWDXUMU03rwH51RPuDxtYsImQWjItLOLRg0/KdQ==","signatures":[{"sig":"MEYCIQCpfZJ+ku89D5M/+DCpC37ByTKK/JitQiVy9wZb1AbKDwIhAJDgQupRa6vzUHNNo+17q4TmXhM2zfZppwACKXErzPwV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4bXJCRA9TVsSAnZWagAAncMP/2lrijqpFqwcrZljpeT7\nrTuR/wMzNRDLLK4yvTxqb8ERMtWccAnXtqfP3n7N2sOH4UMWsBaLf7STg7ED\nxU5oAFkZUHzUi02sagAbnDJSViKn30ryzcVmynRjzOud1/M8hm9Vso3s0j4Q\nsa414ACh9xjXoNNDMVQKK+HVmdHsCBSliIow3eKOFCx4Ii9VIfujPN+hM3sV\nOYsNyKBO6Rff04SmEvfJtp64mSmHFrGkC2iVli7Rp6JEJCisnHlXvoapj7oY\n4ktdH3V7m598GwoOQ+Swvc8SNoJNq5PcMpuz2/xaiO4vDB6u/Cx9v90icyMJ\nQLWrtmmKHW4UkS+PLPc5RccwQdOdKxEMsKLL+nAIDQnzx8xIWS8L4/wi7oGa\nZ7AULjRskwxUXcA2kZ+XQlAK8eT8RYD7YymHKtEga8+SAzqRcGXh2q9R0FPJ\n3YHsjlyVItnN550npe+Tirpwad5ttRWRZw4G8TRB5rvwhtmQdJIZEyKuINfa\n0CQlPhHxEa+RK+eYOKmZ4QKk7ZWdH0LTiIKzUmFGwrCiCRBs7czgKJLec34S\nLBoB8Ft6F5w+kI6829OXyIi6I5pZTvRF6O2LkfipfLZTXhIfZTU42g4MdXoH\nYE33WdK8HDWlTikt2YEMJdOfQ+g4LCnwJmfj77tAitouGkqpPQHhY9AwBwF5\nDA6z\r\n=oqW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a6543e62b0a579543a371e77db8610a44fe18fb6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.35_1642182089533_0.6369127221218456","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.36":{"name":"vue-slicezone","version":"0.0.28-alpha.36","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.36","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"08d8c5239367efe0c96b24ab9299fa43f5fad2e2","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.36.tgz","fileCount":19,"integrity":"sha512-xN7EBdmnwYjt0Ny4eTh1Oq2au/J87JMPExG8JgQyVLnAh3EsitEje5biP2v+dFlSQJ07SHzG/rTFzKvO7MJXZA==","signatures":[{"sig":"MEQCIEqQ3Sl8/eJ0Yrho9Lrtd0hO4vdUpa0Yaf5pZmXzLhksAiB9U2tqvP8e+p9QTuPHteT8yJXaulxhuz7JHugJLheh7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5n7MCRA9TVsSAnZWagAAhhIQAIYKLI5ev04JDPRCZW10\n34HqCYn6ACdqEs6+U2BhB+3mjWfFQ3F1SKS3PBGeRYSPl1X1bl02q0zN3Mn+\nlwdhytnW+l9fmr4iCqO/L+O26D4hqwY3oF0MRQxishBi/+n5FSyzoRQ2J+oA\nlWHKro4WkD77slmpHllz0Ogi7DscUPFXB6lascBslwOUc1O3hY0TZENtDt58\n/kBV1AvGgIF68aSa+DmVB8UkygFJVGQH54CvQGJ8x/3mvOPn0YSv8Y2pgkAc\nEiXD//rFhb//mHa6I3Zs+eC+QaB7DtT109rNyQFfPmsf3BaY6HPAQqlSv8Nf\nX5M+BMDMlvYUpRBzvCH+fOJ7436Rr+GUOSNfuz20Bqz2r14d9ZRr2OHuw0bX\nvtklL9/Y8hzLVMG6ckRKtTpxsbf7bCnZcJ+pYqxRAysN9vSJ4kMNp0B7wp1F\nXZALya34EtsOMAewZqW1vuH+7aocBhJe9wO3efkSkw5BV1CWNXm+xOhwgoE1\n33G/byP1g/Zt1mgLQv5yU3ZDmPpBWDgbgFvUaTsgcZGv3zOzr1fuCP+0Tjx5\nxkIdf9F12aLfGaYSTyLXSrPd8AfK3UhyQ4hfPm5qRcR3GLOhzx843piF07zx\n+NuWe3zOdDHm6NeNgKOdp3h6paKV/tCxcIi9zLhJHzg3SUIOBLERd4jKt+9t\nha/o\r\n=NC+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"865d17d04b4ec35b2f2aae4ff0e1c3cbafdee9fc","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.36_1642495692196_0.4943210299246821","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.37":{"name":"vue-slicezone","version":"0.0.28-alpha.37","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.37","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1a00805f0a03eb94ebfc5ab64b9321da90b416c0","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.37.tgz","fileCount":19,"integrity":"sha512-iAKHiYP+60p48MkTc7kNWUdgA8i79O38CK62b6UkMnhYBvz0CtbgOPagHxi/o9PaL6CbiCWHUROBiC8XHz0XsQ==","signatures":[{"sig":"MEYCIQC0UJfPegLCu7tAdwhghAIzSk4b/lWCypoqjI+/4eCxHQIhAJDtDN79WhXiZVXAKJgZ7UkZ0a7iym/4HjnUVX40YymY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5p8dCRA9TVsSAnZWagAA14AP/1LSSJa7R/Xj9YUxKN8p\nH2rmjZlTie2VzQ1sznUkGIRjWhWfV0HKZ328g7SgFqb9y29Uy9vbM1C8aB2u\ney+rcQm1jnRNqCc/JWoJ8UEW7GR2FkFBihdDeESvxgY219vwgE0b/7demMMC\nCL1k/hPngRgJq2ss7bMucoZ7cbS3Sow1b6bfQt9hsDvNQFRqylqIi1Hg788Y\nwQkFGbVIemefD8wl1oFAf6AhxDMmU7qdZ654FVKmcEqgyeqPOOZtymJ+bB89\n0cAaB444njfBEipIUz1BgRMpOfDenLg9ThGvfbHeWGus7OsbEyf+eQ5l01zw\nwWiSxDGi6hjQjOI4PDkjY6bOYUgiqxK8xvO72B8esiQUYoqXK3ieAote0iyi\nUd3d+rGMAzeGRk9qJQnhVkgZmmlzg0CziepzQr0csMAY18eQlR198CeGOjZu\nHLrfnhZFF/qq5yL5or3ITVBJKVP/HPdujG+iNJMwPzr1uJiNj1H7U6PazPU6\njCFgBhI4ZPc42cy8SITz8MZy+Seu1r5/ElZNqUjPe9yc3qJn4s4urErQvV+Q\n9OaIyWvIund4k9MAJt4jlDJT2myMermNSImOdmzyCqrrv8pRgvTK7wq5xHtJ\nCsfYKjJQrYtcQTRGZ02gjzJf9s801Ht1YFyXTzwbhgPXQeYIZRZIpgGaKcMm\nyFLv\r\n=5Tow\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3905fa35d8f027fe7ff94c548ac43cb43ea73871","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.37_1642503965341_0.8933246275564244","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.38":{"name":"vue-slicezone","version":"0.0.28-alpha.38","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.38","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"9b2d33d39979d0185f4285bd7184b9fa1ab7ed0e","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.38.tgz","fileCount":19,"integrity":"sha512-OOM+4uac5O5X+gYLrjwUeGZ01wFjd1xGNoza+C90K5UGq5b4G5J++D8tWT8BimVA1Ha8b7921Y3IWM1uy6CU5A==","signatures":[{"sig":"MEYCIQCVpi53SA27xhoGpb4gCMXX6laIClAb2yb0i4DeDPBpLwIhAKQcAP3BNS3E/890ly9bKI5/PMZo0AZAn/BMwIR9uAk4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5sFnCRA9TVsSAnZWagAAeiwQAI5ZGox2NeTXqLKf+/ir\nv0Ci1Zjn+7WNnDkQEUcwVlhR/uLJBdN5CNDzYMleecil3ymMJwq3rl6Pu4c/\neWgFrL58xI554AZSw9ssYgUMqgGehDLoJxV/HojpKcknSShDIpkM+fdsWtHl\nbVtCgtHYcToaMuPXyDk2TWk8vWGQ8bn79vhoimzoVO3RTrH8C4UKiqguG3VH\njozQPgV22os7DLRd7rw54TvNGrkIEcaNsmSXfL0TlCMUNMsXY4IroYsljIc9\ncx2okrE7MNJ2wIwPZCVc2iQ4F4FUcAzcrxcO5PV/txTnw+m18CyxikZgLfyi\n2fyArFMl2GxSLpObNUPeyO+CUo5Ds9U/FgjtV8rqcJIl0Pb6mWIBfwjloS9r\ndITxnZARDcbUy3k9JOQVhyIkiCIsKzdV2Z6zQW/oo+PHyd0VkTCOiXQ8sEaF\nU9uMXYl8qN86E5PSbMqHLbNaFY1iGRE8ThTaQLVrKKaiIYSS3t2pE1BKaUJM\nvQCeyAwEsQWJewXLB9kvAneeN01T2jfmc86rKkBcEBHLQl011m9+Qx1xuStS\nBT2UGu4rJAgSiVI2j29kxINzkEag7+8XLDe7Yv5/dGeEYn3gfiV0HBrDqNkV\nHFG3gyT8tu0dv/DgbkODpc19ExcxxekbrKOsubwWSEmwCmoT1n9oz3q3nSPA\n91yd\r\n=u45b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"80ec9381645a79d57b30416b8a1528411bf997fa","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.38_1642512743606_0.11842843011189408","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.39":{"name":"vue-slicezone","version":"0.0.28-alpha.39","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.39","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"b554de46b003605a2c2f4277258dda1e5790a828","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.39.tgz","fileCount":19,"integrity":"sha512-x11R84JEyv4BtsnOqc0nIKF16RS/ajBR2s5NZhFL+9k7kl5qelnXBl3B7BjLUDUY8UCfSaLvlvZdm6XuUitiyA==","signatures":[{"sig":"MEQCIEWrpS5XBzescyaCGgrPGZFvd94RJ0kII/qCYmzGtTDnAiA0BiS/zQwpRxjlMJF2VjK9fudH+EefmIfWUBYEQ5qdVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5/ApCRA9TVsSAnZWagAALY8QAIo6oOsxtPHaJbLoa13I\nJ8oV+gJrB0L+mROa93he/vCnHJr5feHPAdYepD3Bmp+wJM4BO0Q3Zu5OJsh+\nMl0ZOUg73MVwX9JtgVH6n9/5z2c/rxmaPPGIhMbs22mz9f0YIZ1lRtWSfQ86\nYqV5SAXOf9AsP7U996H/SADYiNWvuQhVV1H7plXdmkAQAjZziFFMiMX1h7Q6\nOSjUdoqXcVEFaKwClh4jWIhCIMQrpk4jd5WFMWNsArWkwWRQSWEaT+f9eQpO\nuaiymHxlZQRBVtTmvyAv5RL85wRye9wjo1IFp4OjwIcNzRcC0zk1BPpnLHpP\nKxzsEEnmZ9mwfadr+3Yy1C9l2UBKsK/ZZqsw4ne+7MF0DxRQKo75VVvD2T4n\n2P8VQSA7VNrQaP4XxqNrrM+SQaxbqukGGjguRCYGSltfKs7yNkMja0ExW8hH\nQFHDNVEhM/tuJFPPlUZ+DglWxV+vzcGf8earDMhg7ceAJn1GElCj+coHPrlQ\nAEORANVAmPkmX7a6kXsTASjlGfj/nNj0aEZfg9StLLby15J+Ixu3di4HZhDg\n5zCJIc/PHRzadyJV0Cpj9LnIyuZYUEp86aG/eFUszXiP5R51w7yRr9Sf5EfR\nNouPa+gPcCUOaO03bOndafgxOGsnQ9SKZ2IxGbAK4Ji7hmDBjNyNUm/SXadf\ni0lT\r\n=1N8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b248c3e33d76b57b5c6dfbd691c4c5b211af27da","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.39_1642590249354_0.579161064534617","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.40":{"name":"vue-slicezone","version":"0.0.28-alpha.40","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.40","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"353514c89a938c83d4b7f2c87f4577eea20b73ed","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.40.tgz","fileCount":19,"integrity":"sha512-Cbr0b8ZhBILyxR4qRBIcQI8OM6FDGBtqFw4TOdm4uC9nKQ2kas6xDM1AgGcX8/oFG/YOT6QC+OBmL/V38EuRDg==","signatures":[{"sig":"MEQCICB0G3XC/Zgs8bvdWzjK90eyAlP4+YRlXpKCrKlj/UNLAiBefhyw1fOdl13gHDf8vKwgkCo5yNHZp9gz55dyegHoYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6BC/CRA9TVsSAnZWagAAUmcP/3KoZSSLEWzYSOPJcGqb\nRCH3AE3tYw/SyUBpZAzFh+0g4bvOJQimDuqlVXjOqIuQLvea/pgfFeRhB2TK\n0x2e6o0XbGNXxopdu3Q/bluxQHVFj5PpyQtd6o/p4PoUTbqPpjjr0VZkYwtX\nGakWbBilIveC5+P/G2rf4T6bZQhqjr7SbHFIF9Ib9+ih1ktwZmpK6qfTVi1v\nkK7e7LXBEYePUCMyk3vyVLYb/WC9UUOCN5xaIvoxfLFcHWFyaoUfw/1D4QM5\nzDNFKZYCiOoFETT1BhJH5eD8BPlwCffL7EMoV94kXsmMbja22ru4c5Mws+oQ\nvi2AOvbbcrjtgthcExjYKQPFHMEqohhZbwD1ndf2+dDURyPOzKtENNJTlibB\n3TQ/OFE1ut+WIGyIm3sT8/mF67rfnSyqJ204vEVEhypaynyRu8NIyA2FvAHG\nPQA0F0FqZihWdVl8tKoWZddHXiQTXspm1Qu3Tuq3vZnQkNcpr8W/1qMifxTt\nnmQeP+82E6NS5i5875JAIsTDM7VHOMgLRAsGMICTRiArE+n/DGkaW0AYEiAX\npw+nYVdANgI1KfaC2vd0WVY8P8d+RWu6dL19NIPDi6aRa4rqXuD4mCpjKAr+\nNmkxRYQJTMGy3QgkePnCkDOK3t+L6Iyzc29+ZOMiJ8q5N+Qt0urZbqSD2xN1\ncltm\r\n=KQu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b34375eb9a2ece111eb1e46a6a6a9446c1521e95","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.40_1642598590928_0.7992046948600731","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.42":{"name":"vue-slicezone","version":"0.0.28-alpha.42","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.42","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ea339dbade8af8e116df697d9efbbc3d820fc2df","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.42.tgz","fileCount":19,"integrity":"sha512-DiQDmrbrQBpV4CHhYPL41XQBiYxeuxEz9ujP1he+hFKZNQ/0YRoh5feCL/7gy+Jr4PS0kHWJtvd319AAWv+Uww==","signatures":[{"sig":"MEUCIQCT7wFz6mQ53FcmF/+qjwN9Ujrc/bCBQAB1V9oR3HMXFwIgASUMTiqxEg2H7kV0z7GfdBN3F1E+2h83IHE/A40iTUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6EqPCRA9TVsSAnZWagAARwIQAIWe8JBczQeKheDzzIP0\nLxLVS6pot9J/reEGLnCoAYBfMLE3Ip8YbvbQ7e4PekfNO/dmlvuT1ByCDuic\n2heXjFrPJjl6AP1cNK8g0gYXqvOckjM0Uc97fSuQxMvsX7QO88V6dMdNH+Sa\nAx7xcVVnOrid+8X84UoPHQGvRjAloI6ApNR2Nr+kwFEujpMOv7ANCrOcGPGE\nCxonIIDG+8JsWrjS9MWm2oDJAkoaNUI07zuA3vnb7FwVHRJpHKUoCNbEHmYh\npdl9g5Ei7d0mve/nw4HqgykSxxEMAGYVuSy2cVEbsF8plzGY/k0YRsd2iQsz\nRCulKiyRDa03pnCF5ntbYOL8E15K7jxIN6BgUFeijW7df0iseNSynauyh1Cz\nnImwGayW2Vx4T/DdwQrdCkooaXsLAc3lcKo1+JuBS/Hj1Cbmk35s7DwgSmk1\nhxzOTEBdc80q7wui6REYxlA6Y1vc6zwRHbggpwkMU/3pSDXNf5pz0hicbjVA\nOTjeElNrWv9kpSKUzDyf55bJYRv+Hx4nCbWdCAybT0mLnbBTkkuJSjSPAEQD\nP974/44wCmDhUsAD8tVtOVRLA1TmaT6ZMyD3SfkBTDJw3bC4vTiODzVQWyfO\ndE/Rw7OYp54cOdu09/kRMD8hCInUFie6EwDiDVUjb9qJ5TqboQqjT5gseTdR\nnT5a\r\n=a/fV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f35845bab45f939fc84dde683c6422b5df86d912","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.42_1642613391050_0.8848341989274728","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.43":{"name":"vue-slicezone","version":"0.0.28-alpha.43","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.43","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"39f6f98d341e03db6d5addb93731172bf5c362b7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.43.tgz","fileCount":19,"integrity":"sha512-DX4vNRak4XxsfaFZ4zU1WIlpETLGRHS3n14bFh467B3LNSn/Z2lV2q9x+WYBgjdP5+gvnR9eQG9OquT9FqZnHQ==","signatures":[{"sig":"MEQCIGDxudbVe4fBZDyCFYY6vcJTgazi5g8PMSdpDu6s2iuHAiBoIFJ/alo27AJLtlIOlIZGWJybAxPGrLszGx5adIHdHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6S2zCRA9TVsSAnZWagAAXcQP/3kBkpTtO3JTsR/Yb07Q\nnO2QPN09PcfhsYIQWpsH6nQD/+QXKfL7r5JWK59ZET6LeWB767DkpYBDIK4O\n9kR9EhcHIMYiecii5s+sHU/myqrwiMLYszDKAWWNAzfc98jJn5Vzpqrm79Ek\nmqqj1ta7bW+bE2njE4T4CXq+uZ2/HSGo2uKdBB6O94caDew82SJAGrPUDPwV\noXUu9u28O9Sb82YorwTOX1FuDKRor/ZGhKZcJIvvV+aDEDbi9n/Xit5/jK8M\nHn7E8d7m2N8huW9p6a5q6KvfI6EtXNJAiyVb9w3S3IW6Z7OGNRN6liwgGKFS\n/CsAXjCL81hE2JGHJtPoFlfwoMSrafYLOsUxXTDasQTe1o0n+IlIuPskxjsi\nMrXomDyHGFmF8Hnr+b4RebtgTBC/BWRHZ8gHFilU3+QKcZlmNe+vp+ATpT+f\neJFtV8hH1BqJkJ+qa83p9zJVVDHB/uJAT6t/DfYjs+ss+dFJIZEQqAgpujL/\nqgmK7JQkG/FpVn8Nn0Fl6Jnbv1zZWzLvKlBQDa4vQ5d8sUvXfVe+nus2809z\ncoxbyX3YNFRCu1rLOCL9eTT9XxYT2mc31wOeKl52Yuu7BnVICLgMF/M7tHvQ\n/BJi+O145ZppE651qN0pwu79JSBTfoO2eQnLmT2S9ASq637riBKil6GsuBrT\niwzi\r\n=gjY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b44ce95b161c64b1b9d17e160aa242fe93042ba2","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.43_1642671539482_0.12033908642703817","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.44":{"name":"vue-slicezone","version":"0.0.28-alpha.44","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.44","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"5dcb85ee4cc0a0e8c2ac0a9857067d9210b59357","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.44.tgz","fileCount":19,"integrity":"sha512-LdSN9GAyGS3Dmmeinhc9lg6T8dIFCanBIY1uB87BdIQnYO5g1V4FJVXKvlgZgySvkPJcMp7E+oPKNdPCwi7aGA==","signatures":[{"sig":"MEQCID+hfQ6HpGt71RH5hrabT0wh83/ZOl/tHVNIJbYacK95AiA3FF9EPqePnW29x6Chiy97Ms3HJlYWYQw9WrssbSzADA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6TjTCRA9TVsSAnZWagAATOMQAJPK0YDEr2sC41kVD9Fd\nxphQmS0bmWq2WXDmtG+BvgJSHBgcDzQvw4RAp+BZVx9dX1lHVAsoSiD0DKrY\niWk0XtUqkPXuKNlUXq2ORjKt3kuQrV/65IqQ9zhzsQeyOKKHRaHBCopGB5ug\n0L6sW7ccoRJR93lQUfDcJrUZeOsYrZjg2ObwsEU9C7OpmQO2R0G1BBFPrrz0\nawZIUZhkHd6SEKwflVqyIWlv3dm+VI4e+qMamd90ym0CAj9b+YJHggFd3g/p\nWfoWQFzvU9knXZkvnyPmgRSxEclcX0zlfrItlX2skY4wrV14gXr50TSMcXqL\nlznbLQ99iKz9aHlRVZEINoTjTGJrbkVFLke4ys5lZp+wNREvyJMKxMTqJtf/\nxZ2blYgKzQy26vRtOXV0QQmebJViZ59k2yyzIceo3CUwx8KgKasasOwZ9WOh\nOJBjJ+65VR45jNUS1FN9IvBTiJBNr1e0LqW4LhtxY0gKo9v2lihk33XbxqoP\nopZnCV3BTPN7o9Fb/esxtQcwEJNtxwsdFRngYl9EM/8SFItmLZOokn8l89K5\nmR4FrgghnECkb65kg1ptMzjd74irXbvCdg1N7BPK6O4c6fZAjCsV9ynfz763\nX63qB+3bG3u/ck0jhIW1t4PnmmLBdjviK9fPK3kynE/llKPw9nvKkWr3usCM\ns1ah\r\n=jtPf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"17a73ae5e18d51ebdbd7980bed67dad93dcec95b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.44_1642674387421_0.10126304204046144","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.45":{"name":"vue-slicezone","version":"0.0.28-alpha.45","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.45","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"6aa9ef852cee6edd86211858ee1e34de30254831","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.45.tgz","fileCount":19,"integrity":"sha512-TYqtR8ZoJ31un6w0mwuF+9CEiqXXFolLRuYSX210umUCIeW5SOibWG4ELhsY1nAHbrW7B3h60bldA9y5x54BkA==","signatures":[{"sig":"MEUCICyzvzblo7O6au9q14ZPcprbK+69CMjETPHfws3+Az07AiEAuCsf2c10cuPTcOoG6Df7n+QvklKYCU03WNUNEkNSBJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6UOmCRA9TVsSAnZWagAAgg8P/3RKrB2iRgt1VtGQC8aa\nMskryMNE+qJElrrURaggqvnPdZsiJwH+DI2MoCuretBdUzz1kJk1pK1Rqg+M\nsI0TvlLFvs9GqtECCHuF83vKAdFSI2N24iOsntfvN/MxhZqTC1K+aUI2on3t\nU1iIKbenhZ6USowugwDbLqHzusmEpibASVpdNF1CHPr9kf3okqYV5nIzi5wA\ndbwfyw+BWUtl6AFD0niW64BmGneuMeRZ98jGqQFzKSBHEMM/wUP/Lf9hLPu/\n4Q5InqtFef18A9FkPlrEER8/IYehFhIMaFfoJ/5/fCZF7UaH0l4FwuyGP81c\ncWK481Ijb89HccHTesHkw6IZMMPfTF2nWApgPGm9yyuoYePF0bHR2ndERraR\nIWqYrUAblSGpjXks4iLOY8pqaEw7/n3xmoldifesOh5+27MPT1PzbMNBmqIa\n+/77eCRRZRMwMqqYmCaOCkhuY+pgjoLegOi7kQzExi4YKBzZtXANeTvRBPKu\nB8MJc93UOfHVObJ6po3R0A1JQwCqAJtbDBZHG8Jr+2xCrB0ED3ZprqAhm3QF\nnim9lZzDeEtOYUUAL215H158i19dJcwqKeNpTHf3KE90S0oyN9TWGWj4+h3j\np4k6p+6uMCv/G0/ZHGbugDEuobjyahZ5LS9L2qIkvKQDpAOkLlAQDBDis7EV\n/w3O\r\n=SQBt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"bc3ee392fe085c578b1d10e0a1e69f7b5e1e25d2","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.45_1642677158514_0.16934227618655728","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.46":{"name":"vue-slicezone","version":"0.0.28-alpha.46","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.46","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a12423f40c1ecfd1afb989508d635647793edbf4","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.46.tgz","fileCount":19,"integrity":"sha512-MfH4/BUaMD8jWTRJVPXrZsZsKPxNGyWNGjeMRe6u/zAwlTyzKdTD9g6w8QuNWjhLKotGlUm2/IifmEisklzOZg==","signatures":[{"sig":"MEYCIQD+NQC/UojiuJ+DMbgnFsGiWuiGJBsow6nGPrmnM9kTxAIhAI8Dhz2KaA1Xb5sBKXYwOucOheIWIqVQjDIIe/0olfJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6WnECRA9TVsSAnZWagAAig4P/2K0PWuVt0S1/1q/LHP7\nRhE4rRQynpWd7w0uk+hFOQxzP2wh2hlpGeYkaKcakhpsnTIEvtP9LdbIDahy\nQppYcelhQp9m26B7O/hooOnmJ7eOERy3Z1lUQNZs0BFvVkOyxr+JZ9nIV4wo\nEDe+8xzVPs1wUEsXecZ/jB0Ns58tcqLl4Kf60TZhiIy+GNkEIyH2YTizqFpz\nIDqiQfJW7/3nxyJH+wFKCbTuiyBtOgcuD3QDaqxLlTZutkIdZ5wOG+O5tt5J\nPiGvadGUwteeo8h2nHgy0PGLYS2SLzhoWQf/3zDHoT7XL/NiDYkE0kDYqIBT\nnTK4MsIkGyPp/PWcGvQXDjtAHoQHLiM5COKHKix043XviFGUzOSQp0CjFh6C\ngo97YlocbTFMYIAkVUFWuKgOu2rQqx/+kKQwruqNuhE4URZOhX7vVI6ZM43i\nq5FGHiXqaEzXZ/qVT2LrG4eG6491iAZqaOiDPKnI95MOae54hLUyPxgU6gJW\nXfC0kKRJ/sGoSlwRupnqDgmeD/cXv/GNZOzPyBrie4fKIKELVnvXy4DxobLs\nQeKBadOxjx34gVvvWpAfwqtV8D3iySsM4dDXxkK41ubpZp0Hodva1gkcWw6B\n/bxgIYUg0dvmZlfsWuyHpAxTZUjrSOHONQcBimBzipCilq9D6CuQTKkl3evl\nwSWl\r\n=zSHA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a4314efa6e4e50e64174b808bc6b08b229a507c7","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.46_1642686915883_0.9169026914917973","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.47":{"name":"vue-slicezone","version":"0.0.28-alpha.47","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.47","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"2c87fd49b241882b6e6c8da387ac3c53e6bb86de","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.47.tgz","fileCount":19,"integrity":"sha512-8mBcvQ6f55h1hcap92O5AB35apuoNOhhecPGjlFBYgbjNq8rlkwMryZ9W1kxU2tDed3BDJHzjNTEjCh+xsmSxw==","signatures":[{"sig":"MEUCIH11xvAPlORt6KtjWqvwaN0wSYadE31aNfaBgsSNZ6nOAiEAjVA/evWplWG4jLmgKVd+UNiyQdPqSA2+P6WNbhRm3R0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6XcUCRA9TVsSAnZWagAAsGAQAJdq2vd4+wRlyT1fS3FE\n13ArDZcXwFR3gvlM1nLrZ9+jfv4xv/BjttJpCOBE7PBZrfnvB32TskaJIqMU\nLNR/u4oLhMufpMygs+t/E5YyU01tGfNNyDhpoFJJHlIV38WbiDSOj5y6J9JT\nBCHFMW3OYVk2TlFLIUJ2vu+rfUvXfCjPlsBsQrnN98f3TBArSYpAvyjfZDBz\nVQ/4HQCGnmzod6/OPKLtxUlU1Erj7Sss4hIaPnCA1yZb9EOMZOopiyf6G2h1\nhxdzVVyzx2hgftEb9A9iafLoUXsERfURPg1hK8hAxIJVVGu3PqWamwxvlGSq\nIAdawKbHYnrb0WaQ3GgzSOhkjsABYNrgYmAi8777E+66tfTPMApB0aSVBXd0\nSAIDEmsxbogN/iUUaVFElJupScmaijl2i7fm6RnJCf6OI+WjPvaJABbgXTz/\nBtOJbz83iffNUd6MziHVfdkcUTGo1MP9zydch+JTwppW/FjPwpCiEo7zzo+o\nubvzyQUnvmImrdXl20+U+eNvydK+Q5sQRjRB+h0IthCyE/SVd5qXGIUN5Axy\nISuUz+XHDp5Nc2Hz7XXiMYC383yAWffgNJ0aj0gE6WrhtwavysfK+OW+8aZn\nrCxu7O44+K7nGD8uAt+JFs6neByXqXchHCeIMdH4kB3ZQEsnq8fqecR3yz6s\nn3Mu\r\n=EIX7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d2d3eaea6c98e0e1db0b9bbf8574b121c40b25cd","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.47_1642690323418_0.9899179171393035","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.48":{"name":"vue-slicezone","version":"0.0.28-alpha.48","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.48","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"9838d94afe192149a207cef3a67accb868fbb04a","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.48.tgz","fileCount":19,"integrity":"sha512-3e5ftRUKG7T+3Mn+ACe5ow71j9q3/5O/ogIRv/LWK+hjf1qAa/0KOS7A4iWPNQktOEueRbmHzvMYFrVJBho1yQ==","signatures":[{"sig":"MEYCIQCKJ4S3K7uD5Cz4t9YQmC51yfAGw1GsrpXjhlAO7HigAAIhAIQ43SFhkClzz2snHMS5WDPVzpkLfzNBVUExZ4mYHFXM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7m16CRA9TVsSAnZWagAAG48QAIa0Vjk+kGVXy2QmsgaD\n18BwaiDQGDS9/jhmJSkPIUCqAc81+C154tpyOZ/hQn9HcXnnjAx5IRlu4MUA\nl7/f7RnYWt8nO/1V60gg9P86SQVOwx2N1pOu7LF+eO8MqmkjNqpE4tSqLSZO\nRxxx6ukZggdWMvAC2TRuF+mApoO/I3hRre8DGGgI7FLAnJNQm5VPYkpkswcL\noKQaJqS9OymItEDvrsm/WHGcqrz/szojrF50KHza5ywK9CAf6+gD+fDIxCrd\nr0Ei821RYIFyyw+k5xsGCLQwk7+BTwZh1cRiVWPvb6M9X05N6YI3s7IOmw9e\nZfGvyh9qkYfDyKaXqnaVciCR7QlkHLxk06hKPro1wP/JNnfYbm0U866JKk1B\nLC7VQD/nPMSQqXlM+1LqMjZecSRP84KNZTmiHK9LfYHsAyIPxJDVbyCZPls8\nrF4fM1+7AJaZAMqwy2d1o6PamOG7JMSXoqYG35Ar+q53Lby6kskQi3vIM9or\ngsskKiG4P+hUqX0MsPmCtk97g5dMaj6x9Z0VzRbqDXxDbrVH0eQfojsU6wyq\nS6T3BDFpJBVcBsZFjk/WVFVqeomUt4U1eVN9aWyjpxIhXWA7IrqedOIXf5Ma\n7xzdsdWLDdWyVPOxhoPGhhp2ynLJU7Wj3+Flrze6sol8IMnytccewM8/NKKF\n2ii5\r\n=Rfou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"c28b11ce0669eaacfe874db8bfd3e64ee92854d6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.48_1643015546546_0.3569117978750742","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.49":{"name":"vue-slicezone","version":"0.0.28-alpha.49","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.49","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"530596289a624facf2043c938845b55de7a92acb","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.49.tgz","fileCount":19,"integrity":"sha512-Y+7V8SBEXn9disDr3/l19ivT+m4u1BrjBQlHF+KrxuoKUEpiZ561ATWyk76qPZ5SRpV1h8u/6pSSl4UzqtkRRQ==","signatures":[{"sig":"MEQCIEoIiJSSSul8QUtHJ6eOLcT12+D5ba8WEHAlFIbaqHijAiAQPNodLh9DzWNjOnqXT7FNBiRumXIPBRKTjt5WneJy2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7pIDCRA9TVsSAnZWagAAmJcP/1OKID7eMdJR5hjf94Qu\n1pssl+qhtsQlHDrVPWhKNhsD92l8AWaRM+GZHWv3gqVIpUhGwJhiP+AjT/mh\ndUM0MAuIxVSXgnIuCL5pwL8YmhGuEVt3drtRh1FPK0kQqCL+pwgB83n/iUmL\nBJ6WeY2P+J/eSoE6gTSouOehkJDSNwIeBzSYHAR/zEPMrKm+xPrO71iwbDHY\nLGJXJG3CJ7oMfSmHc03lVlZ66PUd/FJxwo1dFD7UxZiiOJ71E+20p9eV3/PD\nuHTygz8/mOs8FuhprM1O73/BJkKM+haD6RWuGOg/nYUJc10TZtmeUcYQhfho\nojvfL038oON+UlWUlSpSHMSH/r++Fsi5eU0sS8XLmy/UInx/eyKY847pG18P\ndhG3+TH4AuYfSaAdi0O8NtdId1qsbYUl0chV4/OVrB+ZR6kkdTYOaviFE97d\neuhLS95VofmhpxhlZZ7LEoI7mKOzTYhypsbcgbebVHTu+LB65lfQpFA3XWEz\nJdilJoczskcoeggms6i5vZwK3KGjS5ixhDLHrzS3kPDRtujDR2JGbl9ftzCS\nzcJjjgMIdj2QswYbC67HzH2qlHPRPeKrVd67nAkdEH1v9cNd1IIiNuHAkWzA\nFJbROWzozDJpw38QKV+YhjhW0lRuNjHZTU4z1KtshkyWhozK5gK9uM1tAnyC\nUO9F\r\n=i2fq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f4c989eec27ec3f5f6181c2df4d8701b158ca236","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.49_1643024898997_0.11611621598151589","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.50":{"name":"vue-slicezone","version":"0.0.28-alpha.50","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.50","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"9732544438b0fd05bf6b1ada58af6187fc1443ed","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.50.tgz","fileCount":19,"integrity":"sha512-YS0FUZCnTZb5h4toriLQXRDLGLit851X+Xd6CMa03Bh3Tj7zIb2EEJJSzqWzDbA9ThAg0jKHsFyrrqGAB3sIuw==","signatures":[{"sig":"MEQCIGYhmwhIJd/kgXU58rGXefcybnqlxs51CYmP5cVANa3vAiB1rk/hp1jZJz3I0kG0mC9LOliPs1y9DhdAdccOmCpaVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7r0ACRA9TVsSAnZWagAAHlEP/3c0IqiLcTg3obnnkp8h\n2Ug6rY5/fTWrFZORrgsGiEVIRElZyAaMeYkMflJwEEv4/+OPPeNuBPvIdbYx\nxD+AvCx9oQqAz7UqtSeUGKsZvuS0hqdaDsRWWLqVVi4R8kI+O61FtGr3vFEe\nh4uDG3shObzkTidG6PGwuxzlV3lfFoIjLBvQ+HUSgZQU9zZDp0ce972koKN5\nJBSaqKnYFJyvKtQ92T6G5zYaICpUM+hUqxW7VJ2tU5HFGLiVu0HJsZVhkYaq\n4bvS6k1FoH86bTznFOHDe5e8YiS37AZZQbxm4y3cbtJYw8iyIiHG9M/dwjwx\nJaBw8V/zd59xBSzyxAgNpByTtis++mX2KnYVizztzR3OwtngzjAyfjf5rFvl\n3jsDo9QydYRy9j3tGPyKQiQMqHqAdZynhRH5e80sV5ZBXKN4N7FhieG3/wPD\n48ynjBZqSMtb/dmLaUwdZUstfMS9YKNeNAXm38N0hAqY9U5QW0xEfKMOp58B\nYS4CMrLiKxu9QMoZrLsm2n4M3xe4+elgBYt8teHY5TepJ70kEV5jcStQn7Fv\nrWH0qPalUwVXHALpCyJ9gdFjulT94P5bYIE5JWPGTkGR2LdXkMITq7n/DbJ7\nMcAR1oTvy3r3AU2xs2EXCPC0OIhZyZyyZFFMB98LN5O7piZSdl6/dui5FsQd\ndfQ+\r\n=hxkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"5302ca14f3bf41f3d7258ea477262daa2e79d637","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.50_1643035904736_0.8576046610046117","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.0.28-alpha.51":{"name":"vue-slicezone","version":"0.0.28-alpha.51","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.0.28-alpha.51","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"105090c34347b8e0a6bc1fecaf31b5135106249f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.0.28-alpha.51.tgz","fileCount":19,"integrity":"sha512-ArQMFO7a39fxEkhjo21c7MNWl+O4eNmuA7gLYntiS0xOtpuo12W85J8hnjDy0txvmlpDLbFJK0Cb/PdxjLvg4g==","signatures":[{"sig":"MEQCIDpHHb7KlvEj10dp3AuMvvxFAYAg7rhRqhb+NFj2kNh1AiARtUH2u3dMKwdM4dehV6JaOuxtE4qkkFO+B3lmN7xKeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7sd7CRA9TVsSAnZWagAAZU4P/3HSo+P+QY4qSqjZ85yn\nQU53+EDC4H2MG3NmeHJzODnEzbvLOmnY/C/bBXRVc8YZjTv/t1JFiIHe/4xa\nL7zFGWye57X74cWfFyFdga0Ol/+0gUxFqM7+26Ur9fDwPYyHZRnNBTsV8wIN\nTVc4Rga96m8RZhRPg63Zj80ec7j/WEhVF30WEJEVcPZb6w9F9ihfXAWW/JZs\nedPuPXS1UeZhdC47BU4B3IRF3ssbjIyU9JJmRRg6HlkO/7lCf7nRI7z7n+n6\nvOrp/QFhZQwdb0BacQWZLIx5snA9ANBrfpRfjWNWLIQipDnvhSsY9Rrlz2fB\nlp5B3U9a6gtWRJZwW8ugN4HPPOb+rxUlMJgMNuXxkX1wI83b5VKNLZ1ERg63\nsc3CbHlJ53UTpbrZuJHAiTMZTdPGKS5W4h94NnzkAmtKVK2cOTUSY7xNOXs/\niVWsFWQ4bcedsaEahhwJM+Na7rOvjtvoUcYOs0OwiFD3c6GoXeqLSyeGPUNP\nRGIvFTEfSZTmRsgjCdKs9L6T1AA6LKDs/xUcUll71Me9b/PAErZNjLRrRuOK\nCzm4And2KJURmIyyU7SV0D6/RwVu4xOt0ROuHuBVFaD49QtjUUOEyTGvlymQ\neuHcrMKt+K2n75v7DquA6NjMyYTcnJaWR8jHacY0kusF4GU4VxwL5t9w7uPh\n8rMH\r\n=KFUv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"38525efeb8559fc47e404c6c20e03a96adf0373c","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.0.28-alpha.51_1643038587309_0.5187076855146269","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.0":{"name":"vue-slicezone","version":"0.1.1-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"29615274eb18f1f1c5a66551f06f96a4e6f0a9fe","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.0.tgz","fileCount":19,"integrity":"sha512-onKEbXFBx22UmU/5CGh7eOxEfGfuIsA6zyUemIrFyHISu6CGBLU17C7gp+u7cfz9qCZxMGFI1LxXTXZqKbCm1A==","signatures":[{"sig":"MEUCIQCal0ODI5N1qIXvY+BCIwxBp5YbpmupXIiujb1rgVr5fgIgOpeqwUS7RXOfDGODiBCQaC7QwMH3k4z4gkQUqyRLI4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8pJPCRA9TVsSAnZWagAA4x4P/1/W0rvoU3DdLhMm9qEW\nAjvkJa1XixP1tBzJc2HU8+BU1Enr6npPgJu61g7pbwprWUWfo2Yvxd02Sssk\nnw7Vg+TTRyDUmUZ+8xXUbsU9ksl/vaYGUdTavZ/uQeskez/I+tHcXy3ti315\naMBgsQGTgwtxEB6EsEt2uDeNZJgiY8+FqJGRqUysKUJA2J5myzGXPQtRbuuX\noEP5HgAHKalIPDb7J8wUVKkrYfFfntI/bQz51wSMp6tny6tJZbdNzylTDH1u\n+i/v2VOzpnvvIHqo+d2p8IzT8r0gRBzSRYZFUk9+Lm3KVl8vL4QY54T+3qtA\nRC6l6zoD0v5y59WYLPj8QpkEo7+lSNOiFHB9K4Sks8E7h3cZhBSxYr2PvojP\n2cHy4Yg2SwDPSdFhiljQCLslSdqBKxRJRqg1bttxY3vtMmBmZ1JxEzGqHEqu\nkKuLkYp0hqTt7hB7OHKHX7i8893qNZBJIl7ycVW9QM/zpWC8C8mOYiMitVbd\nm1Eri4dNwh9qUs2xuM1KTYgT6QVGa7PRTCCOlFhNvBqlr84shuHuC75riQZX\n+qgCAdkC6hJzn4vkUiWJiaUlOdEH6bL/hyHe9cQW9/adc5GBCU5d2dEwGxCh\nxfGgHEQYHAieiyaNs/6e2l+a/GnLaxVCcgYoko/XAbBkFQbXOeKsl0BitTB7\nlEou\r\n=GCvN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3af3a572c74ccf33440f9148ca611f1d7c1b409a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.0_1643287119051_0.0789302445650748","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.1":{"name":"vue-slicezone","version":"0.1.1-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d6ee8a53624e531dcc3960611dc32ee1d7da7f78","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.1.tgz","fileCount":19,"integrity":"sha512-/GQHPnZgyEX2i5vyH+n2QCrqqmWLOlz7SapKg+AvS/BtdwIe2yGPS7/Yx3Der8EM1nugzcOL2Po8jYS1dzhatQ==","signatures":[{"sig":"MEUCIE/aDf+LHnnTSC701DWeGBNtqdlDp1psCR+xcopyjGFoAiEA0b2mEKINZAZYbdNOFDsn34FKlSP9t4q69V3aheI6mRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8tSnCRA9TVsSAnZWagAAxs0P/RYDBMQSjmm485yfGytR\n4XwZWTb26oP4SxG6PWeRXbHQKVR0aR6gERHU3JYKPVheqGlydfY9X5yRG5Rx\n+YSoAxZcC8RpuBEH6UpyBsEMJJvcCBIIlaG8CAKsfpceJi3bCtD4QyXY3oRU\nifYtMAPHLoblqh9TTvoGFMOCc+s/IX0rzMAVu6JMk0QXZFpQhAac593rqnvG\nGWnh0hK92g2oPaqvsAl5gRuInZOqIGcQNqjif3ZBTAC0E50mUjTbWsbH0GSK\npHSjmg+f+DERbvfVNCOHFYMpBttKsFtDI0efoBCeZruu5JHstWmHeXcIBLqd\nDNdZmqK4x2deA3IhnJLjA2zouk6Tqd9A9HdI+Wbcm7hC1DJrivSYP73iHvap\n/QmnU/unrx3pOb8LPn+8vbuTdGoMImCArYbvPIbgZ1e5ZNgkqd8njTqDvqia\nWQQmsq9HKGWHFFjYHVBh1jnFVlbhwLpWxhjpTmJ2hGvHQVapX4ohvGU0iaa1\n5KhF0xWnGyusqjcVjAplnSVn9vmP+w5r1c4YNXEIx+kXKDkz1UPagiMX1mWV\npFib+AedZ1m4u3OIjuZOd2efyhOXDNmazex6z5tex8nrtUq2335mqRPrLtFc\nU6WGS+i0BdiwjiKXMZFeZgMrtfrYJM2HoRGLC3ETlY9GcsSZeN9ik8agNVFD\nzxDr\r\n=Gd43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"e31627fa95073c03b58d2d7f8cac27299f18981f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v17.3.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"17.3.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.1_1643304103608_0.7310909026971291","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.2":{"name":"vue-slicezone","version":"0.1.1-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a19ac0e20f77ade1685209a6eaa63d3dc9069080","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.2.tgz","fileCount":19,"integrity":"sha512-Kg4GRzozBYWxdUyvnEkSFHjViDkM8Jpb85Srgy21e2uWRxCUvT0SVY6DJTJfx8tRdf1KGjHruYpTMT6615r+xQ==","signatures":[{"sig":"MEUCIENq8WsaZxnq2T+sJpgw1Mdp+MQZVUp3ILZkuu4iAc17AiEA4hGhlhHK0pFDinkanVxfoUCvDgHUTiK7T/Vj81owHd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uMnCRA9TVsSAnZWagAAEQEP/jLg+wIW9sibXosBxqvp\nQTU6vEFedJ/by3p8PWwwm51BdWJQ83ovzMbxhJSPx/Szs0llTcGowPF2Kdsr\nJmWoFmhNrY6DIheeAdbwAsqUlD2tbsF64Z/I/WmFnO+9RpGPHpTii47+yLXD\n5Y9JEv5jT54Qj6GRbakOydE5/p7Fe3rWKakCvfznzMPoaat5f8t1pYRpdUFJ\nkXUb8kiPd1DzuIu7NOtdq9xvjjjYyRf47yTdre2VMfYMT2R4Yd2UkDiMLM1t\nS8CwtdkRvnEws6QlUUP39LjkC5Vm0rGxCDUZUfCEdqk+M8liT3nkkxyA37QF\nIZhqRWAgiQ7EVtIh0FHJID6PHHRui2hTyvAh2J1w2d56C95lwzZhP2xvtFHI\nMNoB4/n1pZYjYqWMRhyl3JbQQHfOSs7Vn0l5a0xmyE5xMu5bcdGQNjPc/I2i\nOnmtt3ewfkyswqRhibDMBXdBcOQ5yMrXO+QkrXCbR7d9IO+OeNPzXE/bx4TN\nygne0xFq8hXBOAMOM3fTdTGp6FOT+S6DANUpaZ2jMVu/IJdFxELcrsn7lUTA\nng6ruAYAYNQG6LBuz759hM5rQ0Z+PsBjVOxuRDfxe1j0oL9+zTpK8x1JxeYz\nvSgQISu/W6I8o8b25N2abyGHghvTgwZpuD+If0F2ssASwLNqbLEz2Ws5BAvI\nIN7t\r\n=+BpI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"44982775c09a3918e73c3f6513cda8a17573f07b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.2_1643307814806_0.6503434235460348","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.3":{"name":"vue-slicezone","version":"0.1.1-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"2c36e8f4ae752db340e4aa17be0206fe42b658ab","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.3.tgz","fileCount":19,"integrity":"sha512-NbD9veKPhYT5vYhrjL05CpnWqRdL/HDmrdDFUE/mtwIyfaRKw5ZgrXL/wtYlsVptDbLdUNoucm0sETgR10BxHw==","signatures":[{"sig":"MEUCIG1zKJE28E4HcNpgNeA4lzs3pIIroIW2NuE9p8eAMK5NAiEAnHdKc2LCaaEhialgLteOM5teDz36MCjGZvawLXqCXiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8741CRA9TVsSAnZWagAAXKAP/3AR/HRMgMGWjodlue3h\nyUgtIvZaDkBBagDiF7ZNq4lKnZ4UulPg3COHMJvMFEPCPKbxAlFVsUmOEfOh\n4m4mND2W6VqAkLEuPN3YH1dvKH7/Itf7CEtwc1051SCLy36jr2cwOD35Lt1m\nvXOtaNTbT60AzdWuabV81sTssVb5gB9nCENDOCorVPVhQhVwaOV3CzAm6p80\nHjlshFlltVqAMAYaglzztL49O2p1rXN4zEFLg5QzVhc6D9VfvP4j9o9a4+Y5\n2rUMOKRECoNDwHOyUoPY207WuGNLIEOd/5t7W4JFn7V7v7qdLbEhgDqIn3G9\ncPIBMvJIM3lD8KTOZfhJqsqA1GxK8+evyR6m/IVp6cCFrUhWO7CWrX/tdtWW\nV3aaVRCPabU9Hf/0RABxlQ51ucJfTI+9puQ1Ce5fenSjA22xUjcR1mdOtZ9r\nxPEAS/BWTuJjqgBHxJE5u+t0wzAerfohuNqalAgHPm7EhMAeBrAWL6y4vFQk\nG4yPfkfV1Z8ZXhU7hMt48yOAn3wSpecQGIjQ/TbKhcrlr7FWochHDJDK/UNI\nbJkOBnk2wZIrEAMeZUHGMtfePHAAsfkUr0mHhWIPRvN9DD19lTe/rTJe3rx3\nn3uCmCh3YjZBWZSwFOYhF00LfcRhIjIJmi4Oj0EArz+i72JlneET6G9rTJaw\nmeC8\r\n=cQXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"6d3a65c1e766c4e571bf3f051a82ee3ae69556b6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.3_1643363893621_0.42086725008720816","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.4":{"name":"vue-slicezone","version":"0.1.1-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"e18d48f66b31b8be0fae96fae86a0f2f7d8d61a4","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.4.tgz","fileCount":19,"integrity":"sha512-dsDuusy4nHRChW+Bk5Xs7plQToCKY0s6Acj4ebJ8VK3w3TPOCUOKlkZNsX9VYmDx2wX5TGqW/wRX7GTK5oxkdA==","signatures":[{"sig":"MEUCIEtAqYw8HDY7PIv9SPZyTmjPmV4uLUOIpDBvKlqLM/YSAiEA/Sbg8itZg4lWoQgqpEILIm6S/hBqPFf2HnVM5qcv2Ek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9FXLCRA9TVsSAnZWagAAuaMQAJumtGlLvTukc9MghM36\nxQ62rFDHdbguEF802mjFEQK+NzKwRyiE3TRGgOB9dL8lKQhdDfLWvR/AdXzA\n9WGzGVC6rPN+KQfQTyzN0eiabCCC6Pd3H6VeTkm7NIUlSa0k9H+tfBPq2vF2\neBlf3sCyR89Nnc2lNYYsfyj9ODLZ9pynK+VAjNUuemizmYW0w5wP9926PEDU\nF093fKP+i1zgGTwfa1pPQtYISD8ssxRD8/2jTnNS1Ocp4WdHNTm5enJAktZ+\ncHmj+AOatjcFbpEcqW0JAuGQYAEGHP/Fg9SI0rS9j5uunJw0YTusE+WXmo7Q\n1nOMVAE2gk7SrRTjk9YRyAj/jqVmBJXz3HDPGdTbz56pgGfVURNat8jGJFRG\ntfpE337qsAJcaufcN1OQSuD0wlESc9N6VJbqzHlhYm/Lkak3Sp+3v1z5WBAi\nyweON6IkwDtp2Ftsk17yhB3J4xVRsbIdj/TwruvquPtloYFqB0QZY4I1W4Fr\nisEm9IH1RzXBiCdnJJry0L8SNA8VXJ2XNeJgxj6/GUTle+CK1shZOnEMmdRS\nXUDdnCX9zQ9uY1hoVB7V6AllgV/SPbM+BBGnDEypjtstNNlukTmJQInl+IZS\nuUNVWngRDLPQhVBWX4GRcLzluD22nGGBx0t2Eb+m1NGOJvVO+uSWLMsfpsVN\nNER5\r\n=R1XG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"5e965450e722fe52bc67fdf5f173d525e68c2a70","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.4_1643402699459_0.8032982303388598","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.5":{"name":"vue-slicezone","version":"0.1.1-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ac92f2b5f9bbcd1b576f229c9cb6102fda5d74aa","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.5.tgz","fileCount":19,"integrity":"sha512-Bs0po4WBgJG815McIpfhf8DqrxHuGDQmNQ6ITaX6TjVDgo/eu2W1gk+saB6i40qOnwxKq7q664DRyx83Ry0Sfg==","signatures":[{"sig":"MEUCIQCJbd+KTMRQQsCL3oReu2IPDeZzTjQHvGr1ECkf9VETtwIgGizoc3C4ErUmFyi+gIZPdE2qX3RT1vjDWNgAKB0XxdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh98rxCRA9TVsSAnZWagAACd8P/1qltAYCt1nTjJKNf6Op\nmBk3x5hondjg3cH0FLkedz7squNoT0CQKnCBNDUo9Zl86UnKBnzZlkONZ2+Z\nrsnVxlCU7mitePHuFG5P3BfIWmbHm56yNPFwABXMdv6xUgYMjT5InFmUzNVE\nSfVzjNcsygHA3q5JmZa/IWoszkaZwYAhyCFqCiKkJ0ep8TxaD46z/MTDUjf5\nZobc+M6Ij444JQLG8btgSqCD1eoCy08RRmESRPDG64bV9MvsiMa575BfPEfk\ndjsRm5RIA3Dn/rCerPhHnxjsUU6NYN1qrrezIYINtb8JlAYU1iS8vrpY4FW0\nBaJMjOEKy0qRT/qDDiOluo9AgOe0UXb1Ti/NISpu2FJ8GvSFA6xbVzJ5+DeH\nnPb92Y/fgPTsyFUhQZTYfqfN6RcxYV665Ddm4Q4p+/4aM2WnSOyasD+Ry7lF\nw4gMZjaeiR05lHbsuSkEbtzIPo6DlwWARWZMz+552Ml1cX9V23uxlODgrhCX\nj1vvmMXkHFtqPG0Em6+1jkxOe4vPf6iPMCwH5pvFFZp0+XWWLCHvpa7zgCn+\nwqUZ/tqXlG4OqRaDIcJ2gkZTXsZBDB3omMM929Hl3+wH7VJVdHuHt++ajTSH\nJgrH8yBJGqtDwWcP5jqF6e5QxLXlCGpiA3G4R8iUIn24cjHrQuRi3sWPPOds\nsIs/\r\n=3nDD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"144a2e6caea2e07b1336021f5d2444ffcc2703c5","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.5_1643629297139_0.9257196416846776","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.6":{"name":"vue-slicezone","version":"0.1.1-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.6","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1a3f6329eecf96678317e0affc2b6519cb1a75dc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.6.tgz","fileCount":19,"integrity":"sha512-0NaR7z0u4etMZ9ydUyOLv8Yp/KKHX2SgbTT/wv1bUgBQR+Ge6Il9k66vtbU1fUDi/cW2gFGe6NGVTYpQArNgXg==","signatures":[{"sig":"MEQCIDZo40dk8QuzYK8y7ELycrvs/DSPJPmmjFndt99HYou7AiBT7gALMYBkTdZ27KXBhHMBSMtxdKUqVnhMfp6XITSjnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+C6iCRA9TVsSAnZWagAAswsP/ju8bzs7iNvjM8huZLYq\nLXqjtZw3eUFHFvLPoOkzqZxOWuuWjW6ueyPHe7CoctWh6le942cPZwNGEvkl\nskXupff5Hc+uuW8hj6ClpvuWcVchyFiv6jllZcvBw9yK9+/1okg4RBRZ0hfe\ntivVF2eh9lwyhfMY2dzlp1BkXmpapExAnV37QMBardDvzGokQomYS04Z42z0\nsctttt0uV4P/EXd7eLuPU6iVgfnt+cK+VrwJEOdnYqWP+zWC2Wb/e5MIzzf4\nL8jKGkv6c1EvvhOJ33vXbRhNhNNyscZ97uftMdPq7EmhDxseUlZyfcPvInei\naSnoF4RPnZivuZtIwKh2A7V3d8H49zmEbjgCK06XWuLzzCxD6Rc3el/j5ixL\nBI+Hf3EWkE3N6varVPBtK0toyNXE2MLtQVCaWVa0cJCr0DvoyK+nRrd1MyKt\nlOcEJZHqplmem4WrppOPwuKwaCweSYSAZc9CJq7SXaQR6FnMox04K4kHxg1e\n62avCKHzfj5mer0NJyWPuoZ4KSBVycxCDeYi+BI9yD5f+1f8AFPAWIkvOCjj\nIYsqp/MgyXRVAWBydLuWN016Xj6SMK14iPEhfQ4Xfu4mgoQVUIKoKYuk6XOY\nld8Nizbdj4De9BORor54/J9pIZkYhUbcIHpp/Um924/6ePqUZ55RGOhiKQX6\n8PvT\r\n=06oL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3239daa4d983ac3873beffd43eb52d45a2f0c3e8","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.6_1643654817891_0.7244960355066905","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.7":{"name":"vue-slicezone","version":"0.1.1-alpha.7","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.7","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"adac450f21b7121505a88db77c0fbefd192d70fd","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.7.tgz","fileCount":19,"integrity":"sha512-8L8QFUzscc4AyI5XA2azVM5aiO79vNyP/8S8M8jvgoCdUa1NxmGJEZUQfT6a9l9P8D863TqHZpuHpyxp44tX+w==","signatures":[{"sig":"MEQCIGvuH6BzQjk9qKbbwp/AjdHT9k028QF+of3FIe620/fEAiAebONh2wqZUD1mS3DqE7x81emL8RIKnMDKbBZKDL62xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+QO6CRA9TVsSAnZWagAAiQ8QAJCRpVqkLgYdsEJKDYUF\nCoqWz2lPaNTjSaRoCDdUbrhHR+jKpiczAGTuPR1Ra5WvXFJxVJ3URbsdXZAA\n6/DCifcTgyeEM5H8/QMqPCKSD85k0IX6jR3oFMnA4lhqe267TfAhcg/VLzJS\nSRLssl0ylXY0M2KuaMLhOjOLXpTVZxdDlcAGmAO8NmB+sKY9VJhkZOzxDDSU\nSG5hXR8audk7XRvC3GhjAOoDa6wLJ34AmyylUcUrlRJNNrAjJvW4K/+WaVBp\n5pCvQvPReDOTgGe1H+qgUG+6MiQp+DFogZ37ajqWFG0KkjkJkB2+rnyr0tH+\nzK6BnPIyuk0dOWDtRiRBxT/tXMNTi2cgMmrqJ5XrOW6ErSX+5sVXT5W1g+gh\nb8ddhTERbPH/KG5NqvyuNpFzU9jhMy/BODYjPH3qZxlsgRqTQrRAMsvqPd8I\n/dabRY+pvh8BjDCxBFwpiFlwFFbLaO66XARd9CK5GBZTmdBi1aw9ihEGXjdB\nUrSjvPztSV85V9oCoZvvQnmtFrdvjgjNmxseoWZoR7jN5xmEyVAxIvz9tOL+\nDyGab2qwjtwJ/ZBvJvktdoTgqG9AY2nl2UMyoM8gyvJwM0wvKPZvLY5mVqCu\nIDg7NiTnAJdhlu5xkLqdYFS5r+XYnWiJckfFPsvPFzwoe5LtQJ4e/NsWW7ca\nijJb\r\n=D0C8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"c6e8aa8cdfd1824509cabe2b06742412a65845b7","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.7_1643709370616_0.5260744166336218","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.8":{"name":"vue-slicezone","version":"0.1.1-alpha.8","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.8","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"23ece3880d394c43694e0aadda402cb6f2532a93","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.8.tgz","fileCount":19,"integrity":"sha512-q2vYV4voZ9XvNdlGjLnFnUxnSirUhFBfx/N+wwsFoGX+pbHQWdRkQbW1nRvJbmZP5sSi7CFIBIWYGXlrhopFEQ==","signatures":[{"sig":"MEUCIGfp/0H8Oa+0Z+TSciKxIN+O5nYzV/d6gw4bl6M+pqTRAiEAgK0k0XMDYxnTatNi/9fq3pZS4xyAME0AHYO6Kni38z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+SHECRA9TVsSAnZWagAAl8gP/Axek/+cJ/Ase2f9+rCM\nQAczJSCGJcKMMz62e2/ygpst6g709l+AMvAV1LVEioYuohPRZzi9yZsTCc36\nK492KwrKbQce7VrUWAayQP5wD3hvMvtpZmzmN6M9RPpT6PSwmdKb2wnnNfPP\nofyNeMIwmNuoKbaFRJmXNCwkwfHX/DOOGSCqkIpLSmfaglWnmbXYnt4ZEMGC\nRgOWavPA+112bGcgK+nDLG1y6wa/nNdJn4aUutDAiCFUF0IYsbFU7yxTCV2p\nFsUJ33ZJKXmzs6rO07B2y6hMFUxmVZGgCQ9i9kbkKBXdEHxwSaZ6/vYPFlYN\n89H+bGwfPHTzYIIAmHuZm1SvnVr1vUUqOYhuQrlnH2ccWnSYEXgC4XVdsjuP\nUQZ/K2yhnN10H8IuqMKcK4yWlLR/RDHoMf8vlodyXmfWTkm/ExqORKPwYeDk\nLGhT7NwFzVxcX28QmdU22fPmmNSxw0LM7EzdYvNa27zoRODKfrt/YKYwGSJl\nptQKKhu7UH/jwZhqnjxcVcm2idxy+SReCjdqcbgvu7cX+qKwZtuHaTDs3cfS\n7M5zlPz2q7WNqNSAqb1I2EupJy/dNCBy+P1Wb1vFeLldaU/4BuXzrIArnFY1\n/1DN2/qnZZcdNl4/EDyRkeI3u6Soybsbs82DQ6O0KjHmGfnBbRts79TwVVIG\nsKho\r\n=S/gC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"733bf6a0531f9b45c71488ec2832207059781c9b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.8_1643717060184_0.2837204000821636","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.9":{"name":"vue-slicezone","version":"0.1.1-alpha.9","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.9","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"29b6a2be427b5a4b64c1a25b79423ec5d4b8cbde","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.9.tgz","fileCount":19,"integrity":"sha512-x2NPTQQdSOWP1hbK9ZwkEugeDGDK96ZlaZ8uzFXmPTlvduGBELk5fQ1H0gPdKMyaSxoYoA97VIjmlbbktQ66kw==","signatures":[{"sig":"MEYCIQCJ1ysKdc9i+2OmcrpCzjcLF+fsep/ayziHgVW7voClfgIhAOVv/ulnukuEqVCapDkcNTh+SiYArCd+UpqA5kN54rGl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+TiTCRA9TVsSAnZWagAA7fMQAJBwB1hOh9Nwo4eI43Yw\nZWZGB9Q8L22Yrh/ASFBRVTCdFija2meyVXQsfSmfR2UF73NJPRSQEU7W/zHl\n039IPL5eq46wF1Cnl9/ZsHzIMR0/Qj6Wynk1iamccFxxMpTuoK20/moEpYyR\ntTmQFpJiXEK8h5maKQ1aDxyA+rVpY6Y+b9YyayEeVV0vXVKCFcn0KWyj5GGf\nHY4zZjZH0gJX0xTO5M0ldT/ks/D8NqRAxxS4NfREx6BzkTJKH35RB6sLWjXv\nh+56+Z/9B5g5KjDvD7TxdAaFpafNxuPCzTFIqnWbJh7awA7SwnAqQMaZs78D\n+4ktNwtsjyQiQMjhsbD/BFBxafc6+3lDWs0mAMHP7KfIa1TcEqjSiceFVxzh\nMgVZbKe541ajNqXC3etgpI1Pjy6qKrrh41mdI9casnnOmsgtNPlACcsAeQxk\nx7P+DiuDkU/+0PjGRzLoLFlWjcj0cLkGUdCWf9e1w8NTPtuHfc0w4SJofbw0\nF62yHGWi8Iu/j0uwZfNUCuwarYZvbx69EUkft+uWUnf78oi2auXWu4Y3iFRm\ndftdS8TZ7Kpy00QGX4fCv2RSprpLrBzvcLHAOiejGnNbPRXPbSBsVSB/jA43\nbLCgHWxUbhb7kSgH7Tz5v0qfZ/2/rmuyuXIs+LCjfiTwQldJPk5wAcKxa7Fv\nJobA\r\n=bGpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"59c32cf36b3236f9f182ab4e0cf348387e6d81ec","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.9_1643722899062_0.9041547738996238","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.10":{"name":"vue-slicezone","version":"0.1.1-alpha.10","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.10","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f422c9bd449395c8e9165f38a6a29bc8ea2adec9","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.10.tgz","fileCount":19,"integrity":"sha512-7w5AHA0CelNP4cO2XU0F/Z4L4qmosh5C3KWagin0rtItOgOka6rhmlEMwlF+WiJP45a9Q72fDZxox3PtVC6Mlw==","signatures":[{"sig":"MEYCIQC0/tlfVjyj3/wu2+qk5SJOtJMJUMqqdkghTXVP2/mJIgIhANagQMYWqRr8V0EX6TAQmDNsWbA0MMzI51FY6uQN/3YX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+lW8CRA9TVsSAnZWagAAtnsQAI4rhXHLTgQpPNtEFKOT\nqQibn0ji8JfmLa0ZQPVSxHQFb+ug0bmGeqPxsl3eaVdrGZJzt08EAbBATVMx\nVCfNBV8gC8Zj7KmdF+1moUidoGNDYs5QTWAcRAk84Z+hlN7sww8YVa8ueGwe\naTcLfi7xcFUMYvnyBQedqc9qnVbnbRtEH1GB2/moBR4ASAZAxNMbDJwzGfYC\nsmqKzyHgZQAMBEkPw+g82JieZ2ZBx2mv+6p6zTicbLwcBshi1hw6L0WZ7wV1\nDF6rbdnWnY37HAWEn1nMXYNJ8JkkCB36Ri/5k08QTVz31uO1cBFs31yAdcSx\nHPyv0yG6nx4N6Gsava5+HMReYN1ljeuN3MA0jtNWbqLfOH2wofIX/7xM4mgP\nkBu0apVw4LxhBR0sWKa/hsfGyafyUx9iHFY6Zd7T591Zs4DvLyIHBMEPy7w5\nGhBK30VrZCs5tlhIc7Mo+IxUMeYz+AXhj1GU1bI9pkfQyE2TC3R1+zpHVZgk\nMOTyfcQ/TaMM8VrqO2A1l7O6Guc/CjTAI37P5faJA+tSsk7dyqAAkaWSkP0p\nSXVoY3gdHQ5GtNi4czqVxqFUHYyNalst8j9lmT7GQPK1ltF/9PfGA5JEnM6z\n+FcOh3qQbIp6It0eLGWmChm4Q0OHq/ENk/0AoZ+09aGxqKUzz96WVSIIwvJe\nt3bE\r\n=gq+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3a75edeee6881a49495df79d9a37b5655c92eda3","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.10_1643795899878_0.6222233048751709","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.11":{"name":"vue-slicezone","version":"0.1.1-alpha.11","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.11","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"e045b74c11746ed715726167adf984b16a11e018","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.11.tgz","fileCount":19,"integrity":"sha512-V7QLbBv+/ZIrWXBoEbmbxKGEAfjhifR8miz0DRjLmWS/jWkxYpw7t+MpkES01d18UWUggrKmIF3FPin/cc2A6w==","signatures":[{"sig":"MEYCIQCXnbWiuHNLF8X6Eg6RboKpjqIHUejYV07QNULwJ0AdywIhALzLrN+XxMTxnsVw14fgFYiOv8z+RGSDgVrku/+cskWm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+/7cCRA9TVsSAnZWagAAJq4P/A4BBYOL/rqwy5q55yQu\nZ55g+vUN4p6PlTp31RVRgAl3s86+hzrwqFauDsNprHvd4ijSOensAO0Ad0Vw\nzYLwhHeWq62i+qF8jREYsvxka8AOqqHsr0TgLlOlyLvwOCW7cCjozrs+iTgS\nC+91jVYTeU6GyMYKIwaH413Jjynk/Gu7Jh+CNQmhfqDKsTty9IrcBRq+YBva\nr4XCpDQJ+XK61L4LFIlXdaItz4Am99Pmpb411Yd2DZ3zOjbVA31QigKLfUj9\n8gsPNrPlyFyBE6NJ2eueMYLoPFtPZNV/7CAoEEa29HxiojTKs8zGfwmEVLqR\n9K5wKOuJ0FfX8w/pvdqzk26PWQ2eJTiek0hNPL/crp4sBrpPdiR3dDGn3ZMp\nG9uUDG7CdXn8OgtN8Moqz96KuaZeCZ0GJHq+C4YR0J27izseJLWAWEx3S0nF\nSOn1q40K8xeOw+H32YoX5umDe/bYmMj2yYVobfespnh/Fk6ZgzKW+uWTaS+A\ntT7WDomtyAXX6byb/C0vzfMm0zQawW+CE5H2sy8W59zevEwWzto0hkXPXzYA\nNOgvAjNTTFSKiSbNiWzE/hvhiURoHZnRj3uBMjKm6fEAUJ/cx2+1QVUtovtg\nKzA5OnHZJb6FdH96dGdktOUItAZ2I4edjVUoUjzZgM95FtCuCvo9KwI15R9M\ny2oF\r\n=DufI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"8902a7ecd5fe4621631f8a985bf111903f90ed2b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.11_1643904732844_0.7464648804358027","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.12":{"name":"vue-slicezone","version":"0.1.1-alpha.12","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.12","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f4d8ee6654f97674be383c96ace09a908b10dc0c","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.12.tgz","fileCount":19,"integrity":"sha512-GINYvagMXRZliVafqF/2rXZv3Uome2If+VLWXKWkMUxT+BEZRqV6rt5E+R+FvIGunt0NEQEhfcfFtBeIdOqnjQ==","signatures":[{"sig":"MEYCIQC3w9O6Zdgc8nN5ZYekyTXwG/PnMszVIVF7SR3C+2j0NQIhAMx27HvDu7pxYo6ltXf5kboNnCGXJSo7tKxdWav1PEVj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAR4CCRA9TVsSAnZWagAAXtEP/1L+e5XiIwlowJ0BbOcs\n5YLEnPvGEAX3aw3fsVSf/HLHQ3i800VNlPtn6MfXV36q14ztnYtMVPgcPQdb\npN/7Hd6SNw5ziVBOMcaZZ1XtLVeVSYhfYNQ7/YKWI4VzSKSGOQkUSxy8LhcT\nzyRQ+vAtTuLd9tTQtC06vkCpaMkJ8eBQIR+v7qE6fyeb7sS9OrU9gF40sG/y\nh0kLpnc2RrSyuDMn4LW/MWqVxdgYSWqWJMu3kSWDe6vIL3hJArmmM2mRYVnb\nfjw1LxI2zHKtT8rhqFrpbJ3ovfTOtUd5DST5BxiX24m2MxCfnG3scDqdXuFF\n2Ml5kwfrRDXxC8l6rj3yYwo6rh3dURwIq4LwLMLHSzdhMD8bzwYC6Ts6K8l3\nTRbgq2+OVa20u9Mm9nvuR1DK+lGEy4YWOBnq6Gd7ob+QS05cFG/qLEAwCoRj\ncekbiL/EVOA7ZKl76USdQdX8e5puv0yRQrPsvYKiC+WooJ9daYeYH9tEoERi\n1G2AA+V8HGsxqmsZzg27bOVyjSIDyBt2GRyqFFI9GB9Duucp6et243JhzuUB\nwqzhRfccWHsSOd+b2/eKarnltqfJ8eif/mCgTNfaVO+OBiz96QhuI1bum/P7\noAvCRYzHLMYXAkI4kCgWRhadloDIRRoHizM+GlxirXdXYCAA8RBmW2G5uqqD\n66sB\r\n=kQMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d63a8464e3b728e4e9f547d2697b24fc136ddd25","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.12_1644240386770_0.04429881932415025","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.13":{"name":"vue-slicezone","version":"0.1.1-alpha.13","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.13","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f18a8a6243ea279b09eeae059fc823f31e153e96","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.13.tgz","fileCount":19,"integrity":"sha512-Otva2eJJxcYsEDwiowqZR6R74zrClWGX4OruP/pkNYHxfzTMALF9u7i6soOg44b2PQQL5qQcoLXX4e3ckbdU1w==","signatures":[{"sig":"MEUCICMdqKwtAIcOslmV4kp0EGoJgtJqDvXumt6AN77d8w2DAiEAmXZl1mCV38u+2yD+Nb+JTQygz3hH7RRzaSFxYL1GWA0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAUK0CRA9TVsSAnZWagAAEewP/37pdnMiq/IzJogtI3bu\nTq6ZD5STkrcaZIM/wTwqrEo9ca9MV3U3zCoJxjTtCHCpd5CVMBenPucHxzj2\nH8CNR5g+fhWsib3CQah6jZsNuoGQGDARYwTYDht7BsTcdudLkWFy9eY2ASnV\nVgw7S7c1FCj+4Hh2EY+rHlHDkRL23c6c77QN+0aEM8q4OGj8ifJcKyfNtXVP\n8JTOEiHH26dxNApvHNV0VFfRE1dEXyDwaEihJx+tg/A0o0epVwJKOEMBoDI0\nDj7OfSNmvqekMLX6xkB9e63aj1xt78fl1hrlPVWlRM6SDqsY4N/KV85pPsRl\n92jBnV8IyjJ8Zd3ctbV8vwEf83rTLGGsFrF4MctjaG70WLR37OmUa8J6o8Ot\nJAEdZM9fShKC8u+jVx8sgo4ZsnufjCjTWX1+mB3M+K1SZO8K95nk46aym7Hp\nvPIJVBEAB2qiYyk1zYBoWAHhhYWMoqtTn5f9m6Rd8holr+a1F2PaybHrkK3+\nmT7z3c/y4pxm0aqOm5OXpEFewx3vB7ryygTm/W87DEnYiThk1FTv64ZSBCYu\n6fyv3BoNuIkH7Yfr5HyJJiGvC5CakLKxXCjuF6DW5zC85iekUr53nO5M/P55\nbLnloxyY1saZR0N/3W7Uo42aIsS1apFEpW2C0GPh3rKQd+Nnt5ZHZLOJuozq\nthzI\r\n=u3Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d1e985fcabb6227c5e4230da4756124ff3343389","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.13_1644249780858_0.24912906161630555","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.14":{"name":"vue-slicezone","version":"0.1.1-alpha.14","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.14","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"b473bfbecdfdf69be8d73c945c16ad819a3fa5d1","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.14.tgz","fileCount":19,"integrity":"sha512-Sc5j+i7rjG5aOvg6/wlfJfhh/DdzhwfJ4NpvCewwY2xytsIbSxLos6CqxMJ6xR7UKotPi7TTFc7r+YtKX6alWA==","signatures":[{"sig":"MEYCIQDXrBN8sgvUHt/X9pLJtC3IxmJ+LBUD3E0B+bq3I0DRTAIhALpY28H6UpNX0W97rL6nQ1M3XldCPvShybp+sTIFXuFZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAoOSCRA9TVsSAnZWagAANZMQAJ/WZvxqvFmae1N8mqIB\nWDtshXmg08liSQIlvHB5ivHQ+S5PGb9ky9DIdEg3DnT74ao8C2Y9/960T+cT\n9lJZBDU+xUmpVrTa5mCWAtXh2O2ntYQZxAxDOaWP8GLk1+uhGQKQG55Al4ik\nW2ybOuE2C0S86UlcUR7CjcznFifYRJhZdPngC1m4oS8pORjmar1zgRVlQZ5K\n2aEUV9vWEzc1QNt7ln7s3u7IoAuWHZyhoKqYvhfBUoHT58ZY6SBYFBrjO08l\nr3kS4Nzm4DsLT5jhdZoJtg7kC1+WSvtjIdYYYOBCSlCNWJsSaps5FAUkZuwc\nx6oQ3Z4wYhQL4FcstoGBmlWhxR3FHiL8BaxwsXShgLbTQCJBWtMgEaTo37m3\nWxdyGho4Ogvbli4n/tKomT+3wWrZpIKgXBv8MWWtjYBq5hGZwC7MpFfcZwmK\nC4kWu7gZ2uVhdy6oe7aJr2ZNiwyUfO+RtMw6g3XjrkSKOpCt0ulSlFtOXnfK\n37eYsQpwqb/0QN55GPhcxpYRznpLS/nvmdmIbYfmLMDZrNLZwRQ/csLP+0rD\nK8jr2n7HkpGrZtUp25N6MjYHORyJ124WRfStPyHceo+B+8uNCAEvZwnqSkx6\nJopN7esF2VKQkP+a0d86MeqY3HL1V7q31MvuBNbpQ4HCrBeSC7rZLDIBRYOZ\nh54l\r\n=sr1s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"af64c6325c66550046794908e207f9d33acd17ee","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.14_1644331921846_0.13360966160647036","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.15":{"name":"vue-slicezone","version":"0.1.1-alpha.15","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.15","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d276ec7701018b10f8293e6b932d4eddda510a46","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.15.tgz","fileCount":19,"integrity":"sha512-XEfMIiFLPMGRDbu/buDY/CEcco/DOa72DSnGg89QMZ/Fgj6NTwHXeY0go+HmjQ1o84OravY2gY57O4KpXKrFMQ==","signatures":[{"sig":"MEYCIQDA/p1jRdUf35WcoHZhatAD+oo3T3o9BHLhi30vOts1XwIhAOH83XEIIzwjh7x1L2PcHDEH/YsrTb9Quwde/dRU6vKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAobDCRA9TVsSAnZWagAAz1QQAJhfnj2p7mc4KYI7Twci\ncNBkPoPADLlb1+WvDaAzX52cZ62t0kNH0o+DDWES4rQVPftI7HRKHhgy0J6D\noFYLskRf5wIpJenwhgB9UscSVjsSn+DKEVMHxZigm/ulfc/0StH4ZAHQp7sm\n2cgVHIpPRpxtZOqAUWVIlbF7WNbZ9t90wjNtrbxe15h9M5CAsrSzvgSgifSU\njXgEhROjWPRGutBbQMc3StLKYRSm6svuqPc5OQDyR7A55oTJCAg0bv1rHQbX\nafiypmTCJNMkW6aVHtVHOLYj1nY8vyu85i4PPdNK7nQ3soG0qC/FEZJ5wbFm\nDFOnyzFDVqV2o7DhkuvJYFEDvmpFcy3IdGqM+ShHA+Y/hekRreGPmVVhJ0Sa\n/vPLJypV0cMy2K+qNjP7Gc0EIjqJW7eu05a4kriT4Li+WY8bs6MtF8iG3+bc\nzc9bPRqWuFD4awx6jPJ5uv+na/wMKWDszyTfm66UREIjqyEltoOonaEp7Rnk\nr6QNmurtnMhPvhVqyZlv1utR0xLCOIt0BZiginyA2my5bK+eAkV3COe74R0i\nQzJwaqzbBjbhbk50l+ckL1xUhKCdYtII4f8vuJXB0+v9iMEtDoPKbLNC14ld\nrhEm0VKE9N4KR/THSUsmpfuq+WDIQoV8tEBXkNNMHVJBrCtOy/nTZ9K0cp4i\nOIzE\r\n=Dtmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"7a441d3109214e02d432576482bed37714423895","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.15_1644332738912_0.09207284309811392","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.16":{"name":"vue-slicezone","version":"0.1.1-alpha.16","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.16","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d16271b95b3193aa5f03461319a6694a19042711","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.16.tgz","fileCount":19,"integrity":"sha512-KTzMQgXUL1PetJZDSXkECGFYdQaY9TUNYbIfZuzKBrCEj8QVCpnYnaqz3ihH3olZ9f/nntRisgB3Jvjz9EXtNA==","signatures":[{"sig":"MEYCIQCBnXJXKxL2NW9XUs8tmYZzZAsVg2tQ5tHlpgF99T0nrwIhAOXjqHJ+ZSiA7+JjgoXCmQRlG1pOp/GboRT3e+aDbJHL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA9goCRA9TVsSAnZWagAAd8QQAIv+xYXceAEaInW/wmrh\nQjyd7+YWXnyFFv8eR5FsdViDyOoGDl67x6sfUh/DJMrpmWG261330U4Ilg2q\nXr0nUWgzaZYZKU5Ohu83+DOnurjBFAH0E2bybrvMBweNgEFoqVjlFB3LPBvM\nqymS/U9sqVDN0iQ/DRA9oo1E5L2Jq0WaRgDGc0aXqbDcGM0vfQPC9QKwcKEi\nI3VJLCymkqEgsCZm17MrYhnqPgpX55IvNVTI6cJIBbYLjeyQaUI/70+QpCk4\nPoh6SGg0pA9blfgwXMTpMqZVEJUNj46SBwyS/CQxHxbCnvJRmDMzqhCF9N4y\n1yBfHBI63zNIxwfp+OIqjfShH4THjtlw/H5Nim0Edue+XUKkM88MM6N4MSzN\nYou3HzWwHeBC3JLvN8IQL9dlQuvKKQCI4grgZqgpXVpf93HWIoLmuZ+YF2id\nEFiR0f0VN7vs/CcTUt3WOLy7JbMxvIsoq89ij2tM+zitI2/UhL6A+KpptfVW\nVtx6WtH1VekzTh9d19S8mj9oUqQM96ExqErsUuLSmWte1WYQl8jVwH9O4U8j\nBd7xn2RMlLAdppEGGxjjXLhYoyFaIhqROsWfJEAW7+VQZnkYh7nuyvf0R23z\ncSPl6+V6VySeRgsFx9cHcaCJ9ytxKxd3IVdvhaGsFQpp0XjXzUmp2+YmFwFq\nPnbl\r\n=OzGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b1cf9fe85e8eb26a5adbbcda4dff53c4cba5f392","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.16_1644419112233_0.6140237966087279","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.17":{"name":"vue-slicezone","version":"0.1.1-alpha.17","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.17","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"24e0d2f2a6b22420d3c3db626e2a53f29044da60","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.17.tgz","fileCount":19,"integrity":"sha512-66fBSnPuBEsaus9FdxG2rXsZzs5TlnI5joatQD5VUdKtbqMVVSJNmee6ZSVKc5Cm9we61mlf+n4qsmUKss5qTQ==","signatures":[{"sig":"MEYCIQDDVr+PluG9YCuJ7aYC+LaRAmvU7WuK8LzRPSzfrJdlTAIhALUUkQZ9sZcSEvFaYmNTPZmISkWsRo0QUQARmloinc38","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBOAnCRA9TVsSAnZWagAAMaAP/iymfmOJ8WeinbOdaWtV\n61bKIQbBe8aJ1FRfCOwAheXNmS3yQxRMDNJ18EMMkVEcWw29cpz7emNBP8+I\n1Zvj5zD7qriSFvhhyTf8aoEQGRH5NoSlsHGwOaw3KX4wEHCQ0C7tTb87ffLH\nlxfPeF6HJU9KnX3EPnx1DMy+wDluSLVdJ09ubA0/33r2kxdvOG2gIOtWoEo1\nyXJOZHiARR9dI1oZuHVRtN/xg1H/YgJ14B/Ac+ge81zUDwdptFzu+/FT+kz8\n081zJynVkN5lvXGiH6B4WSK0QzwpR0/CWaVdW2cbWuOcRIdrOH3Ny2J2zzvA\n3k+z77v79izf4u1i9BdXjZkO9PGyDhiTLI2Ok7bMcPayffffOdBnTcSyElGC\nMdSZc69lXvOmPACuueRz+0do8SpmxU+tYbu76dRX9BfOmaBfNv2a0gVq84rI\npjRrFJ2qxKjpdrtun2JIyzKNYZDI3T7VODn0p4E+pQPdFk+3XDm5ZGtBL+ud\nVbxRlP9YWT3h9kW316SBlBxw9Uh6vDOJxt6zLu8RlYkNQBC+5m+/y7kaTfks\n3Ox1njXajtOuU+tNI0lo54P0P6xYuEJGLUMCElVNNwfqZoUgYS8OcGi3IAD6\npmZmWGNmo50UdEVINQoW5xOJF5OZ+OEYYSxK6rd/N8+vw0hR4fJEfRF1Pv8E\nvzRk\r\n=XqnR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b8d035fca3b809f8be8787f3113c7c2fff2e03e6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.17_1644486694964_0.4925308161763864","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.18":{"name":"vue-slicezone","version":"0.1.1-alpha.18","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.18","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"01140b3bbd9320bcbda116ced25dc33a45c893cf","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.18.tgz","fileCount":19,"integrity":"sha512-GtQ7xKauFsMj6ULx6XYmNDn6cSLCBC28TqdVDdUqg+oghhnFqBZ/KSG0Z2j6uq8yZrJ6p8H8Yzc7ICSvdA7CAA==","signatures":[{"sig":"MEYCIQCEYaQTuCk8CUBOkJXBl/fOnFaqg6oFgIicxdhnhv7cXQIhANwsAkaTTlVQzntD6pdkEzoZFY185sB4JRztc6ib15Qo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCmFICRA9TVsSAnZWagAA/NMP/jS1nPeR2zwIK7H9W/Ry\npYdbR7jOdaEsY4IGGMnAB/jzlQ+Y29czPvKFXrkE2MZETEo2fz2iDXoa3fuh\nABfGEkXT49WmXP3QwExCV4PLuPDK8DEsf6lgC+/fdbumGEBAoCvTa6lN/Gjw\nItZfEIoy3PB5OJSqgMm7dFJteRKlNN24S0LWMMtUxQVZDZ82O/luB+qvcKGB\noKnDxa2HkUvqNeIZLKIDgDkWZd6i6yHQ+lP4IZpmJCFSmVggsGnpSkplfdlO\nZVY8vK7zMFYbixgxYl8g16v2mgF3ogMQXfFWXWXP6WG2mrIshil46hFLkICx\nVQvK1GdvsD1QPjsF8QfN9kZL2P2/KHGTsjluN9zPvkkSQ0wTmkSOUDnWDeeV\nzK9EkkIR3/5Wsr58Fv2fR8cMgxq3f1QQ5scmeQx0qe/5RqnjFpxET4oS/Nfv\nYmS5otZip+PAegGeqwC/0+QQfYafuslbruQ+9hVky9cwSCZOTC+TDj3zANcr\n3vjJNbsBEJYiXAu4ju7DFYlC7wbtldR0QJomX/uvmm6voM6/CMVIETBZntBv\nTciAq3aUrTNP/0hnx6UEUFAhV2RSGLPYhVCha4dCL5kenORSIUdqGJSdBXx8\nyum69NCABFjL+GBWO9VKaL2X2oLdILy35s4X3HGOk76BI/qQab6yay3CNJbX\nODcO\r\n=t+Qa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"43c2d79bbe20b8405dc20b4a379b8e44ca32d13e","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.18_1644847432589_0.852480351818556","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.19":{"name":"vue-slicezone","version":"0.1.1-alpha.19","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.19","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"da2cfd22507e2438bc852dd138222116bb256690","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.19.tgz","fileCount":19,"integrity":"sha512-PgcT8mnRu7RBHPLk+d4Ax6s2KxQeaj7qq60OJfq0rOl70Vn9kWtlYGcc54NOkHt95seH17pkOVzCpHcUPnuqjw==","signatures":[{"sig":"MEUCIAnm4pIsd/LJDDgZneXueOWeaDD7ARjqEQMoc3m5gCIKAiEAux77cFK7CL17ozeGlTLJwEhxyYHk0XPg+Bi6I1zASRI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC4SWCRA9TVsSAnZWagAAvWoP/Aq3KhfsRJh/Cpi8gyDi\nTH9u9LGhV8tflZOSHmTiP6GX2N6VsZ2m72ZvwUJCj5mL51IDQzSnN5AMtKbI\nPo+iPpG3wuzUzK9TAGOiN/zRBeIG6pqc8AMt3eZ8Wc40ABXrsrD2t+J5LvUZ\n5/2QF1OFpGIbR2aCuAb4qllaty2KzLTZ8lHKd0BfHy6uzMW8OboP377NpwM/\nmvxAzafaTWO1IMDtPugKPy9VFI47Qe+WsPfUHXMujft+mbooFANQjbO40+oH\nnnMxLRKizjUFDeJqNF1pB+GvUTbZFyftWQwkxGHCdOzUP6oZ50vmpqorXkRV\nYBV2pZTcHf9cM7OEsjr+1+9fj2Rk26TOuFhOhWHSOlQZcdfPnArcdkaS9vw3\n2wNIJ3wsaNxkhO1XJ6lu19+wEuSAlqL+Pn7DIcc0YWQ3Ld8q0nWrGE4GMSkG\nkbskQvi8se3WNpdqP/3crxqC9UzwjU9q5pvMfmRH+mFSN1Kjk8Sf6P5aOWX6\nOfiDWLdM92ofbU9dy9C+4pSUdnCBescDPYTnGOee48vvfhBsdGgDniTb3hSE\nhN6eL8ZMHVeIAj46n3mLI6pdBnds9KYhhuIw4iaQOlZzHylyL4GnyDU8fFSo\nQcX1dFGT0CyxL00kKnvi7z2CFEcYI7Eig9VAjHvHxZaiXEl7TRfR3UYx1Xu9\nBHuF\r\n=14zh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"1265d80520d99430e9d4972c4411aa45a1ccd279","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.19_1644922006479_0.9833444565308205","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.20":{"name":"vue-slicezone","version":"0.1.1-alpha.20","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.20","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"6fbded86cac0c3bdf094f49c7a7a372d11a40572","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.20.tgz","fileCount":19,"integrity":"sha512-KykoQSylamzJCD+6HQdXbaxhmygAmCri6iMxmIBTqYDEkaIOCXNXG8O0YOPkn2A+QV5AvqwctVD/ibXoptfKsg==","signatures":[{"sig":"MEUCIQDzRBxwoVE50aIAoYiHTq1DqeZfbMgqSKrT64j1+lvuagIgAbPkydXZo8fCFFyfiiEWLFYLxpAQbaM0yb9pUj4g3HY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDNVGCRA9TVsSAnZWagAAw0sP/2CVijZ91qcSFPPmYfas\nkBWaoBoSFBmRKShXKOK9pAr5Ay5HQe0pGDsutT0tqG83sps2oWI2YgGtCHOC\n1CL3QUzp7TvtfdE0ohAonwVGJZ68K+RZsbVVSKwnkjrqTpncdvVaYB0VTqwt\nG6tSfa1szD84mOjNzpwDvMknSOgXkmrpox4tpQyiVriFNtzBfM8WjREfC03c\ndAv/EKkaD5KAYVglCJlaVkhubrdYlQE1P4NKlI03ZrzgvWIi3qizFHBKlFmg\nyf1xx7n8TJbUeDJZOmnj9r6bc1RpB+ByyhEiRluzALr+lbNOMHf3H8rj2Jgn\n1ZZuS7dFCBUIf4K49UN4UXGsy7y1ZTW90/CMy108WybXtHprzl+U2OH5UUqE\n9mycdeYDy+1eVvBplaj7Yo4Zopkq3VQX3LXlUIi06SMAQOLwVHT+557tIo64\nCdOX7le90VTIRBxQ7TGlpeS4ZQoOVE4ax3qKRNzmC+4XFi9Wm3jaOdObt2cB\nusuBCzDbLuS71FmCsd+5WlV5qtpPBm6ZggB5PXksAVAZDXsxktx3kLDlivfC\nF4mx0faMcnXSJqYW+lIN6dmWppFXuJkpDwhfUJry+aUfpNsG7fEvjPtPbXfh\nb1JBs3VB3eToZJ0MlSSESR+gdppSYaXscXHaMffKtQ3H9NqmM78/iZJDKyeC\nGyvm\r\n=KNbC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"76d096b7df288c36c53c4ac3e934523b3b6ab03d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.20_1645008198712_0.007241904581474445","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.21":{"name":"vue-slicezone","version":"0.1.1-alpha.21","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.21","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"16896d064da8f0cdbee208108e18783fdffc5ddc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.21.tgz","fileCount":19,"integrity":"sha512-0WQhlPbh3gBYPJIDegvYs2OEnhbZyl5el3TB42JV0xTQTD7u2LHnYQhiTIhplrPxD4uTmLLvTjn8T/pDN+F0Dg==","signatures":[{"sig":"MEQCIC0DtKroGxSlg47Y/w8/K4nvV0jWGQDvnm1DT4JlpsiCAiAXqykG4K6CG9XEYcCuV75j77z65qfLPtv04WZP2xDrWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDRPnCRA9TVsSAnZWagAAFz0P+weFWjGqCyecl1/7VqOD\nBdCA4iSpOON+WSKuPY42p3IlaEAVAj4Sfawc+tSWCOU7sXAehl2GIbqlX05E\nwvnsQtX3ujQL6gHtbQWtAuTOBNiFAM8zfXUL9YhDFFGFiHRKLiUCLcAHUHCt\nO6S7elzFUy1HBfSZ3WBlScshXhmghr0hmHEwYK4avaNCle/pKGTdDezcUXHu\nOrphMZFWDZOF9lFwWmsW6Gx0F29S4cvHeNSnThEC7eKE4j5RUIl9t+lzw5hW\n4W3tLLwCfibbDct/YnUBFiDp0cviMVq5FLNrtp0Ky+b6/PjtgXShntZ7S0Pk\nu5zAfXnF5W0/oR6wdYJARbPulnyM3Np+7eqfYdJlrfgzDO+8XEWVTJ2FfcTd\n15PO6n2N8oeEbXYn5z/sOGsJoD2+MuC6uPsSeKje65dtWhCznmJX/5B9/Lfb\neQEhHYuorBG1rM6cXzGg3BDIC4Iz9DQi/icyp5qFI+xw4OBZSP5Eum+yweVJ\n1qgZlX51XVIfeHl8VVFSMV/rqUTIi9G5I1sQ+i8Rd7hACsy+uEIjZQUg9Pd5\ni7hOGIFiZIedW67qf8hSGFJm0hAzPfpm0otmdceI+Qj63MpNIeKfK9LQ/+ET\no9GinEtz4Db3fsFnW0Vc9EABpX0QFAt+TzpIGCi3C7QpcNGhAZ/VargIdOIa\nU5CD\r\n=cPYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0663b5d0b5033ea9fec8152d160c0945b6dc41a7","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.2","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.21_1645024231062_0.9186262354624113","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.22":{"name":"vue-slicezone","version":"0.1.1-alpha.22","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.22","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"96979dbe3e1291bc836326906a32ebe547a8359e","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.22.tgz","fileCount":19,"integrity":"sha512-jRkeKhf/k6PmNvuc9llNlQy+48n7J9jQgrqVNPSXoA+5Q2XzXLcYBQntBgFgUg0vFpgrRTL0Dkug3/TxgAYq4w==","signatures":[{"sig":"MEYCIQDb69DyCnLfMVN/epCE75Y7L7fSv7mLoPwU+3jeOYXmMwIhAJ0e6kT3n373YqSaHoJ6GSgTMHesI4IFyB6gXCxcmoBc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDk2SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTUA/8De6zh3jyctoPpCmrrKEGQLqIQcGo99dXBcYA65dE9kZFu9wb\r\nwyTUUkVsFI5c1WeoPgxLLiS3ADqsOKlno5ZzPB7+Eakegu+oXMNxZ29OORCZ\r\nFkxhnGRWhcjCEgatXOrkKruPgafpRZVAEuZGn0HuRo9Ej2sWgrU0pnyM/BOK\r\nowbvhy6wkSz6Z3D2wE8Lx1JNXaBSYRCdZOTn0E6RZj2nIQuz7mFwHZEEcp5G\r\nucc6rR5++v8XaVN1XDzNPFhVltzVz9VlTC1CWihvYzdLZp8/6Ilhu4KeyIdz\r\nezPnhq/kxZ4cxZ9Q3ixHsLzEWgwFrz0tdgGN1894ulEfLQfuQfdVB0UvLwFN\r\nbhRqakaXzR2DwdjUy4l6BcgB/PdZ2yvQcvVNaAGbF0/iMmNlsn9/vAv3fns7\r\nOaKO8pQQwz5KFwRHtLX12P9FHJHZmD6U9cuuTCLCS2vPMS+qbYlnLqIc7PQe\r\nxAhWIrR9MSGsRwMQi+UWdAH5PyNXh4ANFINbeFbTO8RjUNY2ePWn4Eq2u4oB\r\nt/eHvriVExGJ5+ZXdOadEZnCifZS+YD2ay3rbOGFQ5narDIauXqwewAY9s8Q\r\nXXOo2LyGP+Zf658b+9QPsZGoHm4bzdgrx5vg15Lfed6bBtj6/VvszVoSXNYz\r\n3wuIlxkoxaI0htoOZQmhp0DY0PoDA2jClTg=\r\n=DzNQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0dd1054ff47b56f30dd89cf0c79dd1d3d3856a7f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.22_1645104530388_0.91288483622805","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.23":{"name":"vue-slicezone","version":"0.1.1-alpha.23","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.23","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"c5370813208b53ce7fe971b10d2dda1d66a3a7d7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.23.tgz","fileCount":19,"integrity":"sha512-JO9bRa2vkhoDV/yXIrPkaarRO5TuI62NLTLJqY4MNJNFYSvGX/LZPnZZIQp+w2pz+vjimKUtPIKFqOZOnTGShg==","signatures":[{"sig":"MEUCIA3Ie/mdtHJeokM9jFyzKqu5fYsFauqcScFQEEmtu+WXAiEAzNWp+NZSjn/r2lHYcRCOXvX2lP3dLtTgJBCSEAN+B6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDoJ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf4BAAltzRjmg+oI2d+MGLR5qXOhJN+l0GOhZZnTxy0LcXS01p+9V9\r\nKdZbKra3dPtjoYK7BsVUJtkl16rSHjzJQZAvVhekyyXHEsMre/jrTxTARNmt\r\nB72lE4nD4nWh/CoYdBcwQ8I+1kXlRjrRO9W+Utyj/bfPv+DMYzGh162kx4et\r\npsxHPL0AqupSnpeNbfW+UKEbV0hffCJubD+B9Uwg2RCxvHQzn7hQDKYZYFJ9\r\nNuepyflRx+EmP9qB3W5A/6R5/8/a3HYrwgkwIeq04PbafAtExGSWzoQdYHHr\r\nOx5rmgWaYKvFOSpZvax3VT7jQ9+ZBJTL1lzNR0nBTu0j4LG1BOwC8wMV+wT6\r\n1YvYM/4P08ZcjlKzVvMCkqDb9AckbqFml4zvJbZ46Qd+UgRvoO+Q73ERpaGh\r\n3RcyLhIoZ8JYMHwuteGO6Jv9mvyBu6lrcuFe7qaLz6tUiNVsM63aq1c+p4nC\r\n+YGZDCqM/NEA/tJI6/RPGBgMAxQxqE6PY5q/USgOMSeYvmQS3V/qKvyl1Rxp\r\nNyKAPky9Mewcw6XRZSPIdB+T3Lk7FL+6XQ7qILdntg/CCOMXbWyHvonqj0I8\r\nJDFxDwF8Qo117yrs3qDrNotcm7ZnLY0y/8xZrLVn9MJgNnm0EC/Dwl7TO4AC\r\ny1raXjk7qAghJGXFI1xINdCUkg7FDfBmHCs=\r\n=FJfv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a120ad211cebbcd70682dff8bf92747a476e0e9c","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.23_1645118078947_0.9537340653420454","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1-alpha.24":{"name":"vue-slicezone","version":"0.1.1-alpha.24","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1-alpha.24","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d4d173764d4ffddb3d745022b44b1df7227d7a45","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1-alpha.24.tgz","fileCount":19,"integrity":"sha512-hjjn4jkX/6MjroVm0Ve2NFidEiWrmGQY+JuZFFgRVMLxZlQQg4DuynK8gcRDd8hcNNh9m5AZthO1aop6+B5ukA==","signatures":[{"sig":"MEYCIQDpmm7fm543Iqb6t9Sl1GO99+P2kDjaDdYVz4fXHAoinQIhAMUqWNtpo7C76xQksh9+Ojv0wcZdojEjoFuIqsiOJWpq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD3rFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVTg/7BMsIa6FVR2bghl65uEUY99xMT/6/uGL3K73ups03nxHLi2/u\r\nA98s+MHATS3Lykk30T48S/0P3ZTo7jlWX52yqiFdhwXcmIJt9AzPaAIDuYAE\r\ndyVA78eFwehe4kK5WLEGvDrqpSQqOf5Y3gfGag9ZOW4kUxv3H4CW4dhVylP1\r\nMLT7PgWjzye6VjKi85zNwGQCsZHTXCNttEt+SZeuzo7y7BjaK1ikUpg7hQjy\r\n99vBfRA0aLW/POv+TPTJbOQZQVvTvk8Ayx+ntdzkQrhIPpyJusGFxWxi6U2c\r\nh5KkDWDN49vIMFn/Q6QxxnYqHsjdTemoxZeZP+CevJIEs0XWnopZkPyUaXC7\r\nqYWGVc5XTjrAQ2/TxSa6lgdRzQ7Ytyq0D7Zsa4dFtdZH9esfBmBacUHyR0SU\r\nIT4QEDmRypNnC9gXy25awYytfe5BLTg4e1m0qcBr0StAiDq4Ny5J3QDo/06H\r\nepKNb/XZ6EdFrTn4gyytbhCaaJyEWShsqVTqeUGsx/d2gXxbJ+ffZ15hYLM0\r\nE0Mj+k1r/CjmM1MfFdErINqoX8S41Jxk3nULUYgRNsua5i1IxHMr5BmBtLoH\r\nC8TBt8McsBA4pijEAXKt8C5B8+LC7eedx1XfLm5ClwzJAYVU16O2yoTc7Hwa\r\nhiNFtcatHBD5FcAE7HpYDukNeI0KDfmtfVg=\r\n=fk2T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0df7b4a7f40ec13598d10589b0fe1405b4513a3d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1-alpha.24_1645181637271_0.3842916546151154","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.0":{"name":"vue-slicezone","version":"0.1.2-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"c9badcf7b39b264a385902c2d16ab5721d69f609","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.0.tgz","fileCount":19,"integrity":"sha512-cZiy2+zM7LukYtH42/aC+SYjt2iA0n4aHT2QtUH5vKkxZBf4iB8jDVtxyJSzYDrQGYmIp2Q+rdNld0ndSZLlnQ==","signatures":[{"sig":"MEUCIQC26KMkek4qxU5zz5oP1iXNnSuglAdS0R1DPXkEse5QSQIgUuhSaFvvSE6T4VQre/qUtvYuM5+Je1RzO9eEW43raZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD6itACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKfw//WbtG2EGgPievz/y1KkB07W6mRKc6u6Cu+x/4QZpOpgcoXukD\r\nMxp6pub3xwjdUET0anOzs1MRT04gj4OPhcblV+e6Nd+3TzYjik8iQBUMO/FL\r\nNZ8TekAOkVaFpmOY70NGAwa0Fbz88QiRm+tyRbWqSJWiBuaj+hHCNVBw94W3\r\nXMxw5i9+0Mwg8NnGmG0SFQ4QmiRbLTVdeoRcM9E7cFmw9/hOB7sH8F9Q/5lO\r\n87Rn5SA4i2UFzneuplXjM9x/eAKnUTY3fr+5TBxWSvY594k0AHHio8xK0oQ1\r\nq/ayOhWzgSyn3K7y7GQXxUSDpJwdZPl7cWsWh7PK46TMmvrdj97IVECYF4Ig\r\niozIubmsByxcOtiPjXdJ/OwNOtKEF6OLLR5HZwPEWUeamG7RHOHDnt1qcpJN\r\ndT9mbx7cA1jOL/yEas7VzBqylyN+ukQsEM8k3eUSqgv2vA2QRH2/r3+O/uqO\r\n2ZQwITo+jzYGQST9hdrsuS24qELx/3xoyxnViisDleTK/Rb3BoML2YE11wZU\r\nFqpKepxYUCPhzxRhat13j18PRvOHGHXCPfEnrj5giA4iNUDZBmzDi6qN5Y7m\r\na1JrvW2AkkmS0PSIREbAKsVUhIeKCrAr1tB7fxM95hkFAz556TV+ccCLFzSp\r\ntiTLNP4++qFoc/vVTl+0HSXclaJhS1Fk8WQ=\r\n=7ySZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"41a40be02c8e0b8616000655583952ad6ea89b79","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.0_1645193388887_0.6913438904326199","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.1":{"name":"vue-slicezone","version":"0.1.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"089690848be0ab904dc4544977b491b70e467d2e","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.1.tgz","fileCount":19,"integrity":"sha512-+xV0eHFpW6ljXeknuk8fSdZBq9+0hPyyLnqZhBuCeVwZqb6sxrKjDDRo0UtjSyBhjSjVEIa40Bx0yM9yCPwjEw==","signatures":[{"sig":"MEUCIQC8WDnjEF8DTQnoYaN9JTr0PATIewSJ2swyi2CoUOjxTwIgBDbNZZrtYHMG7dMqMnPs2SnrFroF0p91QodjG09Oenc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE2+KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7Uw/8DHsudK3+gMHO//mP/YrpYsrlQNweoTGhVCF0HD/LVP8HsOiR\r\nPPEYm+VduOFudxJ9eLVa7TpPI1TzRgqtMWxashYljfmuHohtPociHIu5HLNC\r\nW60SrqUyOItpukm1ardsQIr9Zvv53izKf2XQri3KVlTOQFMyAL7axjTYHDfQ\r\nh1mYE7+FGZdkKSXw36/g9siBYkr+7aLdWRW8MZCDQnRg5SLF+CPCn8HIn3OE\r\nRrx9QSiycXKtc761Iu8ezl2FcIkRLUDgVwpcSveRZEcrFm346cCTeOfa6qWR\r\nwwc00/4XyO5718zIBuLaAMxQtU4jld4e+/R8ZukqsR5cL29vYIcs8RazYrV4\r\nAGVzzc+DWoBMI1GoL2RYbopRHyd+oXDNOtsJfdtdL2NJPE70aH3qQDOZ4cGi\r\nic67rnljxxXTu1PPTPASWrnFAB14TGQNCxRcc1r1X9g4PG/ipO6vZ7xQxnfA\r\nne1HeAAQgYOCGSBoRY9x+YmurbpZwPDCI+MErC6VC+ZFVmIzQDOA/UC7vsdZ\r\n+ETdD3FaaAhr2RS251pky8b1lL0IAVL/pDVZKLxzbuKWva+8YI2+k4p9e+sy\r\nv1orJoSeJWEAxd5pSfpKC4+PWA+O1uPR4NmfRIc7cD9VsYgyzrAxcmLtCxsE\r\nCtBiSE7O2gpi5eflOkETyeWSkGWq+p6I2l8=\r\n=Tqre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e6bdc305eaf668a10418b3cfafb0388e27632f49","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.1_1645440905973_0.013269117656477869","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.1":{"name":"vue-slicezone","version":"0.1.2-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"5d83230be2048118ab2cd3e456aa909728290c65","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.1.tgz","fileCount":19,"integrity":"sha512-/UWXhjHRB+ZhLMweesh20s/dRVRrhguJ0J5qi2H7iKrnecz//Xpgh7NhySULGN6UyTRdElcolwhnApg1kS9zeA==","signatures":[{"sig":"MEUCIQDAHol4msjivABytLpUpqSVa60GfFoyR/wsRs9dW98JrAIgDFSOVk/4A9IoBp6ooIkhh5JFSzbT+6hdK8srXqMBUes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE31tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprjA//dRzFERQPIqXtRgUaJ3Q7I10CJnEUi0fCR1JVCUSGY2GiFy5a\r\nVgVtcvnEkvWqvLgLEBBbyrVYLuK957LGLOsjZ4xdoMVxyYpSSKTc3aJ53P2t\r\nTySbqHhx82w9sDS+ySUIQO9m+ptYrShiOeFNQonqIzfW8n7nkITyurhlrAqu\r\nfC+41GCIX4gOLawJi36N7f/7wybgPWMZq/gpOOVq49cA/rFBI5LQsnU5yzcg\r\nT5yeK2Qjxht5sDswhH1xY/4nrcULsrW1R6cZ72B3I2YSpsWzh8RaAx/24tmr\r\nfgJOafHAI1DVT72mJrnSBmT7yCOKhC4/nshlb1DOK00AXTPxCraQ3AjCSmpy\r\nVL3gNA0MIWAJAZn1c/ehgqj4ehyiFaqV+4h8JDcrzKXtwqW1Vw+JdJ3/mBdq\r\n51i2bbELl/afYadckbj+s7rcEBJ/ZiF1T9zTJzefvfmKQc0BwT8I1R/g9K9I\r\nD1qGtqWfhPWNodck1BRCuhyuftMPRm4zrYz9nBdwo8E+i847ez7McNmngQ6O\r\nBK2oDtlpIM2PF8KcdpQfjWcdAgEtICHRGP84PCRXju3j12tKJpsMQ909oakO\r\nKcGiqmb6ij+xRPoGZmB0nJw0habsoHEPfaopmFAVYRQPxDW1+FMwmTfM5uyn\r\n1KfIVCNxEV61kHLVO64hhlP3DY3+CX4WWkE=\r\n=r0R+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"90524c1f119658b43d5ab724f12434c073cdd7a3","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.1_1645444461201_0.7298974434506069","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.2":{"name":"vue-slicezone","version":"0.1.2-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3b2a9a09eeba1bc1cbec45f404f90035a6a06e5d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.2.tgz","fileCount":19,"integrity":"sha512-dnupflA95Q9PGRKB+mr1fkC9zLdQXfaKomv/Ol+prtMSt2guAQ2WiF23ZuHcQLKJxamtOrrXTs8J+NKg+ZjGKw==","signatures":[{"sig":"MEUCIQCgWMqHZrVxyWZ3Z3EMyq77eVMPCK0Ll0X2dt9Sb0JIMQIgNi6tR4uz3cGvxLtx0OexQek+AhfTkslKdvivkp961lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiE82TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtPA/7Bj/CkMH43EIMhU2D1LZ+LogqgGOU9zlmI1iVVuIEzRfYk6zZ\r\n2FqGyMlEeFq+mekID+hvhQAFWN7DsXaEtIwPEKeJkGpJYG824o6G/VCjq5Sh\r\nG3wuR0qaGIPDFsk3dQ8mXEaMsOLhZWIKHkn9AeZVnivEXGHUBJC3pjndCmk3\r\n/1UVMOZlD1J6ftJEjgcXrNqj/Lh/bY/fDktOIIWdddHFhHFOgguQOzkTo8Or\r\nqjHxSUc4zc1UyX1vBZzZLMFX+rPFiQIagItVzsU5zKsmcOoO2+a91S/ev5/8\r\n1iEGNkZpAx9fEhx18eHlIXZDV1gqHvZsG0FHIh6kHEzEjBPYjnQgBHHk1AYO\r\nj43EcSVxiOUjwkVAxV3sAUeVD8cBBVyZLqhRVcG36oCAc4BIGqDwTuZQjioA\r\nSbknmBzfMhFnaFDn1w+AhIcpAAAO0nH7VDN7iVeSeL7tDWDuWS0S+b/MDku4\r\npD50UN+NnvLLNQ++xZD5cmX4A6G7rva+MXFmLcqsQkoGGPa05ftPA5w9m8Tx\r\nnCTwSNP93g8sXnN5juwlje99wGVW0b4FkNLxKfanmDuUJkUIMHpyN1v+2W0X\r\n7gTcECCmv3UJcAwyd7ehOSCN+I7cEi3hQ8eveA6EvR14ps4w/VhLo8YYLiRc\r\nNptRWVFUO7v0qU9Fd7lW27CccHCt1KC1tDo=\r\n=1eaP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"c638ccc70199eff4c8cc87bbab9232d7f7857ce2","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.2_1645464979386_0.357227539898487","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.3":{"name":"vue-slicezone","version":"0.1.2-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"13ac5c0f129da4a0bc758517826fc479ed928649","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.3.tgz","fileCount":19,"integrity":"sha512-bojRB9y+q2U6uCiSVkZwlOEHMAB0BHaMD09sO9XHc12VG2djFOMFHBvSqNVC7LYL0duiQoWWo+qgA9OXJH2yLA==","signatures":[{"sig":"MEYCIQDAnmRtbwhrLay5+lvu4COKdVFJWsjuoOTfXfMM1F2z/AIhAO/3tjRG5PaIju9GZLqzYvWZ2NHgYo9aThx4wckn+Mel","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFMTPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrZw/9F/WAB7YGpqQBnjKp3bAZNra528riKCrqI+Htuuqt30m4fae6\r\npvCWm5yTHru0wRbrpvt9PzTiwd/Vl9tPIbamDu10TcLtfNvGkfy64dk1v0KB\r\nquV2XdIBw2wK1QO0A0Ncc/9JxWVi/S4nCitcMY964DZnvsbRWSzof2Tu6jEW\r\nxRPn8tHpviyhIZqrSWXAiW7Y/7FH0VD6a2zndhOUP+/eKekuvwqU3GD2sU3V\r\nwc9UCPnm+Nex7Ov08bK710okjaFi5afp6rXnOjngkAls29fbs3ESTzML+iCd\r\nbdEm+b2ZquQkEiPX7YKirogRo56K6vtAG9OVj/K1evtJEj/EaAMTIYcpR+3+\r\noZHGrW1lJsC4aec33M7ZuHgmKXOZBInh7yOfaj2+G5aTTJQ7GR94BjeptqcL\r\n/6qKc7nx+jRMo2fxJFIudxBy9emKHcAknXk84pWpXcLRrrHv0GhSF8WZH7cW\r\nNw9FgEZcpJs+nzgrF82zaC2cDfXZuFIsTI48bzqsyanfzx5WOhx/Ea84oaVv\r\nxifyUF259PJbBr3UdjBAL+pkIDws6WoN8fEH3iF5POTJgGMqJmE2k73Yvn/K\r\n9yqFw/BrWn+OvO+76+3s8M4HMKYtLgH4vckNtltXnT1RhdktNmNMDF9iQSjo\r\n4XBqaAzvI+KiRQoyuVNnPYxZohvjyer+S14=\r\n=7W94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"7b3ee0c20407fbd62faf081e8d1ce79674d1609f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.3_1645528271590_0.026960615770577068","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.4":{"name":"vue-slicezone","version":"0.1.2-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"15027ff0cc402bef71cc78a72a09418e218069ad","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.4.tgz","fileCount":19,"integrity":"sha512-Lyv3yIKZnaNVeJ638ipyzJsXa60C7nph5kKbiIKPrfH18p1K+NgE7v3snWcjOpSt0lf3hBAN2WSBqcqykzJI4w==","signatures":[{"sig":"MEUCIEnBiSU25NU93eIdZEbZO/PMcVVF2qMWJIVxezqJV5RCAiEAh0ys6T2ot2/dTcav3YeTqs2ntiUJsV4dmFcX0PiRZII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFNfvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeLA/9GHVdveEl3vJajiYcUz2OVnWmvKmMwu3oJh2o3TYmkH3zSfLB\r\nrL3HKULiE8QNFWFgZh0hJvPcWIIV0VIcRpMjvjt3ckVB7CUXSsUmfl+Tzjeh\r\nx6cwfhejVKkp3aYzgBXSf/S1PbPHnEzBaa68Alrwyfa8tCLIpMe/4ehukBuZ\r\nn1qOcB36O47lQbQSa94YGHlmg/vxRl6ob9H/nRyqoirNftrsoYHnzH0nuDL+\r\nusR9xQhLgpEsedMFrfkBZm+xs88bbh801Qox2CIIWH+q8daYhb7EWLATkhFl\r\nXwkBy6Tw37NGDCQ4oNMYGf3zfXnEqv85trDg6HEXjdXNfNf4rySdpzyhq9AO\r\n7r4VBar5leVXX4yWI3mlT1ubf+1rEmClsPdFly9HOXmKS8MQqv067reBlDee\r\nkcT1xj9/tXvrsY3DP8+eWnj7Yy+ZCHT5vYekrotryG7SboGJO6SkYUtjbLzY\r\nvzUinU3vrgZzVmVzGs1OU3V5uKr66qm4TbxQQlnif0nTQgVDeRdo/NQvB1d0\r\nnqDr+TWttf8VOTqto8eBodESz/qy6BWOUJE96mqgOoUxoibq2+bi00W6cBMo\r\nWTpU+OaVM3NMx2+QGtGB5N/9lu0Knaa9gQxcjGfbIPabdX5aBxXQptkYBc29\r\nIAevKlkKgGUKkUUKLRmSH9awbwlF6QES+7s=\r\n=IuZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"268f36f19845f95e3646b016bfa43dae1676872d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.4_1645533167332_0.6929051127148256","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.5":{"name":"vue-slicezone","version":"0.1.2-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"89a74cf6d8a394bc1f34c1fb18159bee9258c3cf","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.5.tgz","fileCount":19,"integrity":"sha512-BwGYWqXcQnnzvGkeXeHtqY9B0ssZE/wDN/WsrEJe15GPiw02RbsOZYdTVSKrsuIeyNwO/7/0I3vI6IlPty0LZA==","signatures":[{"sig":"MEUCIQDJF2qu92xkMTdBQa3Vcc2R76ctQF0oqc4oXEF1rj3l6QIgLkfYZVMDuzQ5i62NKsVvUl9v0yFtwPgIMUpZ/3KGCfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFN/aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoyfg/+PEubgm5rxZTIl9LUnidgN9iHqMwHHh/ulhrllHeL4yYt6Pqs\r\nRbiYZiFoJ1OcecnZjTvTA4Rzc7YZd5tvwq2WHX+myoX+MM5m/49RAqaw7+ur\r\nnitI73F1jq53QKY2piAi+GqwWMYa5JnT2rfDNxrMez5+4J1GfcRFgT7kHTFM\r\nAZbGAhL1rLKBhRmElDIkVF5aJxHnOz3XZMC9j698eHgrT383QU1nyo7jtx9Y\r\n0Yv/WAW35lRg+nB8S1OIluZXwmnKt5JoP6e1p/1aMRC16tgyDcU8D0umKYOX\r\nkSyCd/cS7Q3XMZmgtCd34xVFUc15ozCcgsnTIVATSAx7NWYQh2A8AyEhkGjA\r\nuTx/wwsrfkkvByO1LbErkVKpvZYL6b3yrsahRf3/ypjSNv7Rx3Gn+DvW7hbx\r\nzkWTa2O+nNeR4VryNgA4iyhFTV4psniBPYeUGXs/GwWb3M02iN/BU3JC2z4p\r\n/3WZh7zgvn/210gmtqevCJIeSkhDt4cH+7Nq1kj/ubbmT1nKWxXRT1XZCQ5h\r\nj6s7Lla+NihXWRR3i/hkXayEimOBIJ2Z+SW+4Zbrh62MxtwAF7MtO3obOIw3\r\n/oG6QTCJd4cgzy8qu0mxlObgRQenMahXwCSH3zLqkysb/CeqaSoKiU4tqhj1\r\noS4CW+ZlZD1pRho+useDQeWecWvcD7+KOts=\r\n=ghtB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"239462f6ad67d5bdad97c2ef05916d4f36153d0d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.5_1645535193984_0.2088962470624911","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.6":{"name":"vue-slicezone","version":"0.1.2-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.6","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"aa5f39993cc396e137e11be90b9d981cac8abadc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.6.tgz","fileCount":19,"integrity":"sha512-bRTuSh6a+srFgg6dAlbU02SDLSTGoY/E9oJ+/JOJy7992e0mk7/iRETGUTkx7+oaGdpvJbbdsvsmbXAbdPVY3Q==","signatures":[{"sig":"MEYCIQDFoO6s4vNZDAbTh4hQVqS+rFo9852QNlM3EO2zXWDMhQIhAPG003JIsUxmWSL/olttJznPueuE46g8OAFnI7EOjYXy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFPWoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoKGA//W5NwVLj5yt18Tf0yzzVmhuOZeJuJpg3Z5ovCVCG9AwfMulaD\r\nK1fEeUSprAcb3MFT3LTj0upudqJ2LyQFlvpO45XDJx44aPHLUZtac90y2Qjd\r\nZZOhMpcUB0DS9dgEmwzRLaD6FhwrFyN0KHtdM6n1AKSwXqNjoJTJqFNyACI0\r\nmjI3YChgiGX7TIN8TPSIH6wn9KU5jqa+pAcLYwN2/dA9i9fLL0q8WNN3uC11\r\nAiMIurcaX+WLLI106Gcd1i7VHt5Dlv7OSagGc1BQsZaLz/HLyBitPBfNg6ma\r\nyKBdjyrDVcWxaZy3erOuH4+jmrraZqsCuM0NKxItHSapumvwdomKfY+jG2ic\r\nao/zQqj69BzWINFvZENviLPocsIpluyV79xElloBkZ2QPzSYvD2JtL/i4hIP\r\nloAR5hKahHGhn+7VXt/95eDXy6LVA9Mk4zHOsDkShZtri6UrDmem5eWD16Po\r\n3S6HV3qh2g9rkBPWhWmCZoOmTB3Swdcn5yUVgceQwHKQNNQUPB7ElE13hEnb\r\nVuyrfr2g9Z9sk/AsTSAcBpX/eZnlqmFxKw7GTcaj/CoI5BD2cfXDRTQqLVPs\r\nJ+8/e/jwoswOM1q9fEpw3eTUoI73U+j7pWdG/Qt9zOQfQgPu5k4z7WfB5GXl\r\nz7OsfnNHJaA5/d85vwhYALUVcSodkag1a9c=\r\n=rwhD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f4878dcf89e40fdfed521cc3370782fb854de5b1","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.6_1645540776015_0.3327516857783195","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.7":{"name":"vue-slicezone","version":"0.1.2-alpha.7","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.7","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3f96a20a66e15bd3c8a361b6dc0e431b62bcb930","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.7.tgz","fileCount":19,"integrity":"sha512-Tk4j6O+iVGTHCK7dR1puunlngNgbhmvO1WzeP3ELp68HY7u9aJLhg+7VNdlG3d2VoJUG6M1l58+V1imyZu5S3g==","signatures":[{"sig":"MEUCIGcudXkXQViIX4zxmS7QniKToPHGSJI2yyo3RoRzIeCIAiEA4oUyFmUhdcTqOBtS0hP3EEAkLNzY57t9FCrma80cYLs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFQP6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroAhAAmX5X30G3CjLrJWXZovPAoklGkDMPiTiXz1yD+msJqn7kIiYt\r\n+X7eL6zUKLyv0b279lvNV7EI8vhUhDL3d37MSlL6GBGZYfC8jI3GlCIeIQ2f\r\nyCSDN0jU6iBpu6STsau40YL4XSLk01usJ+WWDwieMrClrUAIIGA6PnGgCSfF\r\nBlEQjaV4DyruJHChi4wiGFvTbShSeA88T/+P9kYQjmNHtAGpvLZ1xu+t1Q0m\r\n+ZMTa/fA4vCVv6jVv/lOv53lMMaMrKkNTTQjpWtyn/8LpZWhFPwa+m+1arTr\r\noy26cUt6ts0ZlqWeHIvKu0lyLBE3Mm69wkTulSpINdDn1zwVMcaanSxxCrYn\r\nt+iBkiKHqdSOKnw8D0DIB/Ad9VArLefs+dZodxu2jOtpSLycEHKl0ydmBenb\r\nZWasXs5aAQLltb1M+tKYwmKDKBFf8ONClLK2Rr+B8pNs57DRlvh9oe42VfI9\r\nondee3Xmf6vyJ06H7h01sA/AE+ms5ldt3ytYg99ZGKWjtGmwN0tQupNEe0fb\r\nwX+uWoe9GOcyQFSbxIeCmxIwULuIXRUT+9StaBTQ/wud7CNX5SecnZb/evpc\r\nVwv834RnAjUdNEMCcqDBPIS2sK8Cg3zpV8qKsmGazc07151HzthyjnSjieGE\r\nhKp2sL7XohTT3S8nQH5wu8VjER8V4ALu+rw=\r\n=EFDQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"5dceec068f70f71d238a28df33e099918df44f7e","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.7_1645544442093_0.3029944311738637","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.8":{"name":"vue-slicezone","version":"0.1.2-alpha.8","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.8","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a7516fbfc73982e886ab59bbbebc849bc450fc31","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.8.tgz","fileCount":19,"integrity":"sha512-LF5SczBZg1tMb+zctqujqwd6n5K4e+5rcVlWb4WDAiyNFAhENH01O+1xAzzfWLz7RJz1Std1NmiKEAcwNIj/yw==","signatures":[{"sig":"MEUCIQDIFvYZEb4yXgPqY3a35PJ0VDukQIAw+KRcC8Ex5beu+AIgKIGl/g5UHQ2n7OSGEeRlKLLNUiEU3kI2z/InEQk4zjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFQiCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp9A//SSaQTdy1rvyQ4fg24Z1qLtViE92YDGSuwegh9pmWK7ogm6Yg\r\nXMwGQ3L3tDs3ekbHAbLHKf/n/fCMZsJn8+aBuhKLu0elrzCmO2reGp323xuM\r\n5XIP+ApqJmfCtH0+1+7tnRI9Lxgc2B7Y90tquS/SAOmROjjwZX2vv+AaguZY\r\nyULIcVQduuLTor8S1PIfEKyraXURL4DsPsedUEubXkh+MZXmDv3KvNWD9C7V\r\n0SyU92m7W1jSL9T9de9RkfDEo5GzFtvZR83m99AZ4EzDUGHcWST7D9s8+Z2+\r\nbdVBfEMpl4Lr6oXD931lERrVjSv7biLRygg4+W/Sbv2s8khbda8ynhWF26va\r\nNb/bXtuVYHpyxafQAN6C0uw82d9R0ylY4mkXeVosR6XpcSUHf1/AB5HcqxPD\r\nLqGCQkEmCCktsK1vZ/XxWleB7IvzScrOTPMO7nhysPRU2/Dr4tfzFTq0n2M1\r\ncBm+eFeaZOmrw1FgHG+lMuBtFLgEifT+St6YpdzDrZ+dxeFwkL3idAgZ8ddM\r\nE3Am3DBel2geVHZuEHGjbYt2bAkIgXiUl+Vthygq15/bdRO8Sx15lsgUiI20\r\n1F6Kh7q7VLRwVY8uOM+gdxS4bjKScghzn1dXH+Ubk5e11IriqHTD/kUq6Ync\r\nyggzep5Nxadea+KSHYgG6yn7Gt2n+RtZFVs=\r\n=He8F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"94e52ed9a8c19f3aaf3515711f103502b5311c48","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.8_1645545602129_0.7625840415016414","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.9":{"name":"vue-slicezone","version":"0.1.2-alpha.9","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.9","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"38743d4c8565d6bc95b87dade5cf391c1070d659","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.9.tgz","fileCount":19,"integrity":"sha512-hr15idQa11Cx/65l4EeRJWCmI5XyhfS94ZERS+3PqEecjMIU+ZJcQOxcYlAqKP9WQuX+2gq2CeZkGUgcSmVsHA==","signatures":[{"sig":"MEUCICYDm+KpqQm01eQchTIKmQCoYUx21B9FShDO1N6MSy5dAiEAoFnOtSlusXAPAt3OCcvkJ4fz8qaeSYZlVyK2R4oukm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFRkPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdDhAAhMFkYd3c/jtiRkOuUOJLrd0i4xh378mC6901a/gehaJxT36X\r\nnO+qL12R9ffV/9LnjLFZks/GK86+eTxuwsh0rleLwzma28scY0ffXv5B4+aY\r\nbOcWNEz5kvlZGb6b8XrlOmnVfh/+I3CjFSB6IYDR/+QzA819nVVng1fUMf70\r\ndZD2M82SMaZztxE82YSf4zoOFWZA+5nX0d85jppzmxef2wJt6oSMeIvT0Y8K\r\nwBp/0D3UznFR2Aq6RynCzf8es5Y4U8C8mqrLw5iCNm9X2GocXs5AA7qX+xoY\r\nseavNXmnXArIq4rgCjHGuRBQo5j8jcNukk3bjLoGRtEq/C95W/g3sYUe5kmr\r\nBgXN2Wsk8PJpwFsLd4+Cu2CwP+9sDhVUCCKIE7xpSj2IrK1mIe0mSrDaGlgr\r\nhlLjjTzAFjZyTyPnH8o3196Hwn6vyPZw5nfKji5uV1g2eBwtlfNPGlPuZrq8\r\ngTQzFlnkwlg8BAO6PN5ACDfpB78mqwWLdQ6D/aP0463/o/6ZgiwS1Ljsg/JU\r\nQ8EfQ3l+OWBzh3I4x/HANfTpg/mqZ3q6lhts3T6HeZvrNq+g7Du66dVbqXAh\r\n6IuXzQqyCDnkqdTjrSHpbFmcH/dUbZZVJN19qSoC4firB5jx/EJ+qSMYxhgS\r\nBfXKzy3UlfKPBa//V9p7kD3dOqsG/nNPgWU=\r\n=BR5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3adf1104815cf20cf7b7c7169baa9b079cb3fa1a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.9_1645549839213_0.9012782694798158","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.10":{"name":"vue-slicezone","version":"0.1.2-alpha.10","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.10","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"954423000ab0f0e6cc159932d15d22c7fd65296c","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.10.tgz","fileCount":19,"integrity":"sha512-EE6pN+jta2wSuGRaQ+OTA3cGrBarEPGktsOMQhucg2bIdiKzToFDR5JnTRyjq0GriMsoJVFD89zkyJpgWUjTjQ==","signatures":[{"sig":"MEYCIQDMQGHxkcnCKUIgHRwHQok3PVJQrUyTMDICiw6ziSdbtgIhAPj894qaB2cxDO52it6OC4mh8Yir8RLqNIeYN9jqKQJ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFgx9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokJg//dlW7ZfKuVqKgwPCzwFjkZxd7rVkVkwqQ1KKbNT4PZCIDGcUt\r\ncJ7umK5Yi/TaQ4wI8nsw7WkXHNcPmbgmTyvB8oohVlhBf6mp9Ha/bfhJbJJW\r\noHpM1niB5ZiY4eopp9Xn4QNYVd7+VKotk04R7ondhoGS7VgdmEXJjJGhRO58\r\nkO2/BwprRIz8TGLuDCgs+egNkQFDibcl9mGdi0l/FE2VtR0I3+Gul0E+JE8/\r\nJ5XmTrB8BXrq1/VPqAwziri5P6LsKT6JMSSNC6gY5oUqTWA6rnFk41nyytMP\r\n4UfvE99R8QTtlRIHZciuaZbWYxRBoxY1IQWZvxmz9Dy2yIfd5GW6OVTpTqKj\r\ntiWqOkR97dIj254lIdGrIorNSI0jJMfrG2L9UwyE0dNhbz9XAERpCewzYOqH\r\ntCWwZZJT4YpgUbdLEBYXEacu7+AiI84u0cQ024u5RETOdAtCA8gj62urFq1h\r\nGTXWjyMACqeRoUKt4S+2DNnuuQdLR0/ANJnQBc4yo7kHUa1ZYOrIKYqquhAC\r\np/BWuD+nkRUSVAzvMR2ETpUhYttPK6Ux7G+d7MzSWY0nML4x/Tsk5B4uok2X\r\nIQUaelJVfS6tSysobUZMbGhxeGGzCdGV7IqyVWwGp3tQaDScXbjrheN3jHsh\r\nW/R1HOJZ9JvTvuWW8QfkCl5BJMd0PozXbJs=\r\n=VaeT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"697121593e98e7fa685bb832f738779c2dda75df","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.10_1645612156932_0.6104986434242328","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.11":{"name":"vue-slicezone","version":"0.1.2-alpha.11","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.11","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"11b911fc9b1e13c89fcbaf2ba8416fd79e317bfe","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.11.tgz","fileCount":19,"integrity":"sha512-pBwtulbEAIPNOGlD63ItrgJ1S4+EgIV/1vL0L7YfxDM1ZLroTgCftESEd59snE7Y0WPuge0gM7DxbO4tUnapqA==","signatures":[{"sig":"MEQCIDkdF7o6QDfG8cBj0OE25Cio8o/1P4slTUiDSYq03TFpAiBwHneUT14aVg2yvrBhV5KjbG6t8Wu47qKasBa3+U/a1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFne4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf+A//YkiI4xJM4Zh09kMybh6tzpO9GZKjxLTdt8b8lw+inDwsutYE\r\nYX6HDMALY8JIR0xWJdQCc9Zn6wav0BH2jis0DTSHhVTlBBjpHZwdUjQopoLO\r\nuSXFfEIkZwyPL+TIPyYjfZqrSb8FEgk7dHcl/hXEQ7Lj/f9LQ/m+PzbmOTPs\r\noZVKkjAA2f1hf3pr3rZiGrpimq58RXEVqad8XEl5wksXWnVei3VLb9hMjaiO\r\ntK9dUlmDwIZMMKlGGE+hNdy1S3YvNeTun6A3crkR2bQ7BMLmaT85n2Pl70df\r\nb1rFc3URdBkV2aJKAleRsKVlCbgpcY8k5FxMyDNfeiVKL4PEr4FKc54Z342B\r\nDNhnZ/xfK6uz3P1lk7LNv/738oNYOrEB5TMS8jkTJoxC9WAJGU57xCHDz8yi\r\n9vtSPWr+Pk1/ALsnY24vWF883pYDpHl21eDZObYa62nglSLLjmH2548B/A4T\r\nQQY1Bxw+wo+iufvBgs0dNexMQrkGKI5HXSsBhPlv1uRmHTH2VeMFjYEubxpN\r\nDCU/uBCsvnRQQpWGqmNNwwQOgsgH+U36sW5PZJLmR5nx2s9vQG7RsBJTdJwX\r\neLkkmYd4dC23LBN6QMX95wFawYihhuX2E8KVltSGiNlVxYyhnZk5fUlFNmsm\r\nkTIrP1n4bas1VnP/qc876ZnfugczZnSpt2c=\r\n=U2Vo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"557f3c05eb5bf2b2e30ec5652dd11fb159e544d6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.11_1645639607983_0.5197587728072113","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.12":{"name":"vue-slicezone","version":"0.1.2-alpha.12","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.12","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ff60b2f362a790bd33a618afc3c7be021708c1d5","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.12.tgz","fileCount":19,"integrity":"sha512-2LT/AAgUsmcDvRzD05I8yQi23AP48ZBTX1G5zbiCyLc5qNs0jMyBxm6Kg0qnFFPVuafQaD2vTHLcIcMw0zE4qA==","signatures":[{"sig":"MEUCIF4KoXzUpZ3aCZwsfb1X1r/NBhPt/R0reU+JQp/aWt6YAiEAr9RHj2YKkFXW0TpsYCOYjpuVJzj2feLDihWvXffYCsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF1UpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk3A/7BZwJ6oXNLvr230RjFRcwWZAI/+c35zuOfLUBmY0gjEMpLRnW\r\naG2rLG1l4JFgVt8wtug4j6NX4hoS5A9i++bhyLm256+1eKKDJIOzhwTtJmKx\r\ne8cCkDuC/16NW6coJLnzQ0SfUX4uDZD44qyXFPuWqYF7H9CvklGeQFPlYPqo\r\nz2vs76KSJojGYgz5uVr9FTctuJa9169eBg9JUFPlxHQrHzA2H9JWtcE2MH3r\r\noPaD9+LDT96YBiK4ISDCc15GmO/Y4iSH45RTz6EyrL1TVRjj0U4nCEOyZpuU\r\n+AIBI7WWdu7WWhYpjRjxUCM3BzV1SIBoml+/2dYNrNxlWpIbtWUoT6llnJQA\r\nG5M0S8sK5HO4uO5ZFUYqO/u5duViuwqL4K8gLNPiE0VQ2x00L2JViJ57JR9Y\r\n4gDlR9xjNvspDtB2TRfM66OxakBNRyJ7hU7nbIOyiToxpQWiIvIEu2FM7BK9\r\ndUrzD+AXDB801Q363QaPzXX3yi9dLYJI97PusmALeY05FJQ9wJNmbfS8690F\r\n9K+Hp7NeswSR9l1yjpBQOuj5v1R0Kj43pjY8efWy9Q8lCb8b9C314pr2Sxmv\r\nT3QjvLUdqZd8pQBbM9xom5wkO9e/irmIi0pxGpzEWTkkpFOcbcJwTpLoCQfP\r\nY3gDLiuwruJJarl5qDMASzLLcXIW9RorBdA=\r\n=hSMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b0dd49aefcb774cfe834cfe2dfda3f1902f5571d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.12_1645696297551_0.17934015362704403","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.13":{"name":"vue-slicezone","version":"0.1.2-alpha.13","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.13","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"820a0be9bd3fc4f453177fad7a9e4ccf4aeef668","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.13.tgz","fileCount":19,"integrity":"sha512-w6vJh2EXuvylAbbdY0RpqQqjy1i/hnAYTVO0I71hwWKduWqsHoAYxghujPZ+VpmqD4xI4A1oIdwDgd5T4X+xnA==","signatures":[{"sig":"MEYCIQCau9tUK7MGXxlPRpx5QBUFv15OZvlsmc8s2ErTQRwquAIhALRfz7gGe81yOD02oLp3N7U9oEbuQR3V4LuSNeT/Ruc1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF1xcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9wQ//fNSIMNo5fY1MwnDbGML+uebloinDNjU/vB7VzEdG0rhoxqqt\r\nlaaV3ULxT+VD7K1ayzQp1sEDRPl38D7Y0lt0RZGphR1vv0WZyawFf7bJqXi0\r\nbct/EvMyngpYMvT71hXqLCqJNfhQg2+PPS6I7P9IbDqNPrVt2e30rHdRdWox\r\n0CprQ6/i8mC0Zu6cwwgiNbORK1UGBLxeYoD/W1/ExkW/fzuCNz55s1sGEyNS\r\nDRVqtwV0V62AoGG2JwUQ7vqA26giW2XHVwsqWGtUnWdHLGzT65sTuWO6v6PK\r\nZjmmezKeJ9uaw7Yr5wn4J3vazZOjFiHP3Pk9cLs0VvqctQX+lzC6BNZaVDir\r\nr7yIz8WwUFbKFK5wQ1b+/2i8UuTdYFv5753MhnGowSTa3xxn23vxuqwvqhZy\r\nGTJNUwD1dyPq1zY+ZGjQDEGlDKQXkK25VfHS7PeJ6CQKnmOfRMA/+Vh5SLUF\r\nHFWXTi9G4OMS+SEGMel7ClV1cfr+IqVDsFtwqWyKXJhcRjrgod1g59gID0+a\r\ntsU950nkCbfIcnmtNhCXsF+OFb2GGMLHFzvz5iad3rK9NJU3fg7YAYtFwIcG\r\nwDEWFOGXQiNWMonp0+rwGqD68r+QdBQDGN4EXtMI090OE1gZGlfiNAjs8EPM\r\nbcwxeEmvap8rpYcNwUnHC4FakyQhfb1QqZk=\r\n=v2p7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f64e51e8bf7d0866aa0bffd54c5648f39db0a5ef","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.13_1645698139917_0.09428945688272838","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.14":{"name":"vue-slicezone","version":"0.1.2-alpha.14","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.14","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ce4209f5320172a5bb49267dbb98f5ea53e6c099","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.14.tgz","fileCount":19,"integrity":"sha512-CqAeaC0/8Krs9FEUes7vGiSKoC7zutIYSRAaybChDxBEGcLQi19eteCmN8LB+OtaRya3Df0oz99kTJ+noBHJGg==","signatures":[{"sig":"MEYCIQC6fxWBbXlVuWEdEUFPv8POwEn67GGPaKq/F5a8MoZiEwIhAJd3ENlkdtt4VPKRD8y7ly4FlkwcL6hFzMlDfY9D4+yB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF4nTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrqag/+Ou9inXwIOlWtJGl54zcHEqQWPAZXGzloVGAvxl1kgIOvq69/\r\n+PrM4KbxMBlmjEBjJlwK8pLaBswiIQOI5DKpupD6BThO5I12dA7aoA9KKExD\r\n3CFfb0dtPp5i23afcsPCxcRlaowHKPMx9t9wayAhGUZWkZuip7QIUFzb1pR3\r\n9JG5tkNixCo61GRgJMtS0zIlQXRGzu6xdziqzprxVGPbIttqehHMq96bjyfc\r\nND6rT4TSDky3nIvnQI+Ut3NxvYJ3Mmu+73yeZTCLMou5LOjLCHS9fQ5h8Q/C\r\nnz1MSvFFNWIqeB9WFqAOClNLxOBazRQyLwbvnU6xrijP7k/CYGRLvCXnxaUK\r\nI1kp0bgYqTYlTs/gWZGWS/NYV2A9wdju4+otvGYZ4pGMX+h4bxSRzaW5JBJU\r\nv5m5233mEEbc015qaqgp3DBd5gYhLsb/lSWXhPY7yK2dNXiF3vrjUzI3sV3x\r\n1DhWIerdy4W+19U7o2RRKWpyBegLuS1ESkLHOkhx0VSZqX0DSPlT2rnxrTTt\r\nx7UY0RI3mitVZPDPzAmRjtnJgkJngfjQNPAYb9ucuc0z1Enkt+yQ1eMD0xSS\r\nUGtrvziaXxGdFPWbzFhVPJYeP/j2pMubWRKuulKda9dCn5boC3zC5NamkeBK\r\npDhCnBspxsveShAW6Ji15RT2SMsCBuelVo8=\r\n=7GrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"43510a80cb1c57d536fc2e217684aa4317fc83cc","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.14_1645709779544_0.8235765532768038","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.15":{"name":"vue-slicezone","version":"0.1.2-alpha.15","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.15","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"4ce4861e02d8b93383bdfffa7942e67d427b5ce7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.15.tgz","fileCount":19,"integrity":"sha512-Iiwsn3TY04Afw+vPxJyAMS+fKUBDgIcdeycUSENCbL8dN4JsW/phCHPvpZKP1Y/BQQR2Eiki64tDrve8VJbQ2A==","signatures":[{"sig":"MEUCIQC0+9ftN5CpIMWwMVD1T2/rA8t2Ls4XGLhzWjcrvvUShQIgSY8Kuo5lnFKFbAoIGHC+8hSxr8I0wxzQo2ieSHfYlD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPd4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS0A/+IQnZnrh0RvQ2SQFrefblNpO1dLYllWFe26S2H40GjAJO62Ek\r\nvn98CbYZ6rXt58KNIbu8WLRgLfrrWl5wc6OFriDOalYzMlx4zn3qwZ92Ga+4\r\nyc1q5Z1UMhqTeNqf5ezJhLX++rhjak8Vg8S/iz2NkyWDf1o0r7KXDX28gR8I\r\nBdz6efRWPcAbwhLyw6oEfHUB/XHP7prGEF8+VkHIIQoXu6TWX3d32fegicN/\r\nI2IUbIAxq6tW+Kl0D1vyqwLDxQ6VcyLBqKJRPSNNG8Sp+UphAQFBHWZPOm18\r\nEyygV0wu+UEBRRS5+08hzlM6ZOAqQywAaZhYYBnKaOndWdMVRV39ZHFttCSq\r\nKkKpUSJV/4KnMac7V/crewrPV026E8OpHoYhZKfJ25Xp0rEKCSz68LsjUsSS\r\n9Tkz9OnztTvOGNb7hbAqQDBRJhaX92UjcJW/+XxtGxbgd/tsxOF8rexcDHhk\r\nGQL5JWzQun0VnUrpnDp5VAtlzcxGxdYv7F7e7VcBfGudWZeIDa8MJivMfP1g\r\n9+CbxcdOqsOaggnXgWI8VB4My87aqQWJz0Vfdnx3OqSz6NBj3QrFzwCZsaxR\r\nTMaUB0hjKRWA/ixPVIQehtWSm0mTocT8T/yN6/kEk4ODvS7jn8d1pDbuupR7\r\nV/NBChNcl7vf6iVdaU6sIBNpCEU47Jkq7XU=\r\n=UrtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"636c764dd16679e1313502ae52c1e085b6dabcdf","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.15_1645803384353_0.4205017117583334","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.16":{"name":"vue-slicezone","version":"0.1.2-alpha.16","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.16","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a6cfbbd04487fd3669707c302faf1b1e58b37727","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.16.tgz","fileCount":19,"integrity":"sha512-hT4NlsTuHj39kXLXqPAGgnnuD/55Xr8KKauY8/LJQYNEOQtvFvtrP38QUFj3NsFwt27sfZBqAhgKHnQM/tIpvw==","signatures":[{"sig":"MEUCIQCatZ4UHWqgh32lcXlp6XElp6vAO8aIlX5nrjpRMDJ4wAIgaxlUBRwS6VU7WPMG8hAT+eieR/3f+AnutJRmCRAAHv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGQiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs7w//ev0AI8d8t9CoIO5gZ+2XdeaMc0W1lldA0EW4M13ur9TYDwZ8\r\n7Dqd5hl2KLKZ+j1TtW83i8A/SvHWIWXj0eGjcoFZP11xIT4MnZXL1uhpsdpR\r\nHwR8mk47aNfFYx+l/P+PJrmGZiZW/rilmutoZ8IalPQ1TC9LHmtcR1RFLbTE\r\nxqdenb4h7C9C/wEhprtqhJnmhhhQUoKNCg7KGGtowQKP1oluiqXzfa1rENym\r\n8VJHPTOdWB9c89UhJ54l1ZVH+eMS8CTv3kYDytRlclR3aL1+xEmImZXJ4C5m\r\nmzSAbHH/weEim7lyCRgHKnmV0V/JWA8frAo5UCEugPRThn1LNUk3n+VlL0xU\r\nwHMw4HEW97wdFl62gquVrHGVD56FB1BGFO4DxUSCERZw6rM8279uXJMunuFH\r\nbCWqFC+mB+kyzzLcLTiKCrWCTuuIVbAzwo7HAZ7rDHHzOhZ0L+hKh2wDjAco\r\nKXjxgToAivKxnNtgKtfOpRBZyiOGGJxjz8kLm21i0Ynpx3dnq6f4/dvY2/16\r\nJDTllesiD6xJ9/Qp4uE5xouzRHaEm6458W+hd9ERc6NCUGTZ9danUrQmOJUK\r\n1+2wDJzxewPszQzf8lsEuvqrktuHxP8ZYWMaDkm7G/LWu6624A4knfR+NWvL\r\nDbkFjCx1uTiKgrcazQWejLap36dKPmwgWmI=\r\n=AHJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d2a77b44b3e5f1cb63eca6b5fda3d5fbebaa20ce","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.16_1645807766180_0.47331116420196717","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.17":{"name":"vue-slicezone","version":"0.1.2-alpha.17","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.17","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"be1667cc96376faa98e4961aebdf26676bbdd004","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.17.tgz","fileCount":19,"integrity":"sha512-SGIyziqQjY4abG3CSyw3stzr7yZBQTQ2Jf0ZwncAYmY0TikRXqeYkabHk+q0f3bPGTGwEJ3/6betyrezOclbOQ==","signatures":[{"sig":"MEUCIQCxaapbbQ3jsj8miXdj94AI3jS3zlWW+dwclGRlt3VcMwIgAZna4cphQ/2bC7xT61wYWKXjfvTQLDxhrlWQMbphWHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPHEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo82g/7BvtXr4agQ1K6nVJ60GuYycxdqJKSBfqWVbyyZsETUHKD2n0b\r\nLlZ8Q/PXBlMaBl/ThE2MZ2/uNRwbm8QaSdyLxkazJGNhIjrRxlA9KvByp7oY\r\n9/I5vjRVlL/mF8KOe9shOxgS7oh6Y6Frl3cWU4gLkbG4VAB1QHMO9kT2jKCF\r\n7IFcQ3o4BcGghI7qyeqt7nrqQ0IEt9vkjVKXHGXlJ/ejXQ8ILJm6M2KfgDNK\r\nCWaYZOd2L7yClT4k/kiElFRT5ib1SvxZUN/HaZsxkCq5Jn8NffkPHchUX+VC\r\n0vYHZU8xxogl8eG9WGs/+z5hEyrp1N8tdoMegqUx+Fu2R++qaQPuGoq+phKQ\r\nxpuB2w8tuY8xsSByHVQuxq8cA8A6V7dJ9KEZja3XrBT07KAop3P1o/pE2Uxd\r\ntoHsdMuirtIXpVi2h1IfnrK8DpX5vc2mqtet/1FO+rY3jwmulx5Tx94e054v\r\n3VM+JqUdYJuKZyPnC/WSFJbuq9axyYGCoMRnPmsrdTQwBGFv5QpPYG4geHik\r\n45+d/cG5oM6PiaFMZMOqUZstmmiGJKZqCenjr0klPJHXxBmzAOyoNNsEohht\r\nxYph6AU56a6171cX4OCr7lOR7/KNC5GMgaoWBBTP7cbIfGYX7eZrQ80fdtki\r\n+gH2mcEQoRbViP2mxoMt/FUY8GT9wKas8fo=\r\n=gxpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0118adddb027e8d912356846ec30a404e6a5f136","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.17_1646064067995_0.3422996065268489","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.18":{"name":"vue-slicezone","version":"0.1.2-alpha.18","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.18","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"6808be87051fa8e214279fa7ed689070c54e196f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.18.tgz","fileCount":19,"integrity":"sha512-Mdp/wO9DAJL1cF/RMKaCI2rccXGbudlPHCbw0TTa5GWfPg/mq9dX1JonMhC7/hFqCLLoIa3Isa9bcKtw5elSOw==","signatures":[{"sig":"MEUCIBGV+u+4OuRHf4g2VrlHmpUHQ3/ZjWB8TjBAs96chCzJAiEArsOMl4e+iKqFSsZbI/R6pyi8o3FLyLPhlBpaatfd4DI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHP8TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrL9w/+KJ+DARoaTvMxBeCz8ZXDM48F7elfs6t3z2EufPtl4Js/pbVp\r\n78Nhr1g3KjNMS04frTZZ4PllZqK/9xWnnBf69pJ58SZ+g0zLSveQALvENo1f\r\nY0G3YcECo3ODvLQSfU/bPs8Q9vMEmqjs2ibQ8/6xvLFriNgMcgISkYTTRST7\r\nQYZb8COxTeX6pTOH5YCcJHTNjkolLQE4sTandA4wFh366x/g/yzgJ/U5Tbpg\r\nrVL5e7U3dyaz9P+FSFvGrA5w/o+xyyAWaQsEcXWo+imH9U1ZP1xTpvOfMcps\r\nCAMy29IdRaDcld3L/K8uctEwMGSh7vczS6ZfMa4MgTxEXXNouXHVZjxMEkdV\r\nrQt3+KwoDUWsfwt/lEfS2Iir4Xs1rcX5JhH8oTKgWrC+ITh8gnh3os4aqEic\r\ndKFW9srkT2ZEclCXqFx/S9hhW98g4S/WnW5ZNs4KhH7sS4ILGkAjE3T10GPT\r\nz4q9eHYLsKnOQ14rFsWLujkuPDd6C2wCknGyhkCHddJZbQ9vIax9xwdJc7L3\r\nuHsBtrca/KRyZFdjSrFGKlKm221mltqh5/MuKGJ5yKsPyKD+XtGG7GIMpDMN\r\n6rvKzCEIi1np84yFiCtPuNdd5sKk/8yoMszSmGRN6pBK1dR7ShCdzt6ItDUW\r\nG7QBahAkwlsPjj5CDw1MHUL5PAmT0ivMJKs=\r\n=FTrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d5a59ab7cb73f237735259d42ce7534d6f8490e9","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.18_1646067475098_0.27395476297398913","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.19":{"name":"vue-slicezone","version":"0.1.2-alpha.19","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.19","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"68ac2519f816f1e5bdbf48fc7aea011a78ca202d","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.19.tgz","fileCount":19,"integrity":"sha512-2KvSSFkr1u+QORxL4i3etfRlJ8rZaRK7q1dWVk/Lvnk3eVvpwqSjwplCfmllG31AcfwRo3AgncI3pN9gWOfv7Q==","signatures":[{"sig":"MEQCIGi+wKQimkBRcY6iFkHp80dMHA3o7HP1/LPojjyKLUS4AiA9MEC+Oml5zjWpV7HeZinYAZwX2xzJZRoMi4XFQFgbdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHiq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ8xAAmBMZqgCM02u0LEDHAw5r7QFYMmY0mp3dWP/qDmr2wf3gwz9l\r\n5Fvnh+Tt/qLm5FoE3AHVJI4bS4dsCfL8P5X9aLMTpIHGJ81/kEZh+LAv/nmP\r\nMsb4vHPz9GDxk8uDCzxQYKBNRkusL/KcqU2NkGE9/kOBpqKKuMu8he9a6M4U\r\ngRqe3AGV6iYvXTpBjLvs9QjtY5PieR10GOC+EOhbTeBrWo3ATCd4oPqqbOXT\r\n38lGSjD7pa2R88wJxPIHemrL+2Ez+BeQF/mrA1qmvdUOb7AliCSoPFLaKp/h\r\nMgyZaFcfRhtTPViVD3XqlxMe1MKk2ynF02b+buLuJi8IYEH9giQVh7lnMq3N\r\nrlZ4kZb1WhREQFkWNOiiDW+lFB24ImZ8m3PITn8a5A0DY/I4606rYd3FmRC1\r\nsrsXPsEGIvimJpeltBW9khfQ8sThG2LSC/cT0wRJ576Ie+83O33MGcULdEOT\r\nYvJ5Gcq3eJvVKaC4eHmv68MELYHHGGYEzAlKsz5ygXToLtL/fLpn+Ad+8jU3\r\nVFXBe5MIfj4JcizZKoquI4DyHE798Kj3BkhJ+Jlwkuw+ph56daMfz6+Ink+I\r\nWumTA6TNqHbtJmxqlnTpdPbymgPiPJDpZWxbVW5RucLctzxD7MeuDx2ck74z\r\nzMv848sXJT4TOnL92LwCOhpv8JmA+78tViQ=\r\n=Fkde\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"f19d7a60ea749d4ea68a5d447a700a1d66187c37","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.19_1646144186970_0.8872194041266608","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.0":{"name":"vue-slicezone","version":"0.1.3-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"0042f161ce1a29877d4f272da5c2675d5da7e202","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.0.tgz","fileCount":19,"integrity":"sha512-McAazdzS1/u52Jwa3+sADIe7O+YqorAXbc9/OmxhhPdyvuAaPfSApw25dRQyIYLODepxoUbZGcH48CSmV7jKDA==","signatures":[{"sig":"MEUCIE4zHQhelP/9muhk5iVoaXJdXVMVlieZPc61fTQeJQd6AiEAyzT68GAn/yzymSrQRYr2XUurFSdgDeTcq5vXofjEwz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHi0lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUzRAAntpGRxIND2uvbxsrHpsxqb5lgfHNMhwV8IncOFLlAZ3srUSm\r\nX8jHgBfivsWKU1sb6kRURTpHnputCs15Vqen2q517RrrvB5eQgRbqFu7i4xD\r\nsUXvT2Nb+ZJXMBS9Zy0zHCPBa9sCSPBxh2umEpJSqLRDYb20ThKgmyOnI5+U\r\nKdvRdDGclL72zeb9kSDTClF5wqNgL2rDd5Y16ijNi85oq+Ow73sN4kJ17Oo9\r\no7FSEuHpDZgAmS3eHilpMECnQhOyWHPHTwHQN8wKfWglQwQ32O2/kda6iYUr\r\nMdzeQy5hpKffLuwV/ZwDWNjipTxFjcr5vCsTP8l6RSIcb0S1MmPPb7lIiHZV\r\nELXwQtzyEsU8pzIZl2vouLy7XKvQR3bs8tpNp7K257g/j65K2rnYaI1Hporq\r\ncvwgpk3efFg9atHKcwzmvRP8B/kc1np8mNW+XQ8WpMPr4+JyY5xxw0yDE/z0\r\nRKbMFvZZiYJ8qN1HF9JhQqilptVCXYnkqfPyacy3+y4SlAOEKc73eQjod6ur\r\ngYPDsQF3JRwjmcPFmae0GM8J1IW9DCDer8peHKs4bHXgFXJ/ZD9vPuRKHQL/\r\nPcxBOkw6AxzyiOKap7MX//ghW+qvK3atBqZX6H2lq27bknduPPLIqGE0RVYK\r\nCI4bOOXUfpPij12W/xbFGXgDbBMI8o96pKg=\r\n=epwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3e05d372f3aea56286ec7638463ba30ce467c506","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.0_1646144805750_0.2481318884866237","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.1":{"name":"vue-slicezone","version":"0.1.3-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"520c606b955cb4430cf255905ef2912ff5b7a642","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.1.tgz","fileCount":19,"integrity":"sha512-Dr7U+wqLICmAqz7HP+imIv4OpjfBeqEP0hgXfbhgjaGqppRnSEDWPUZLJUqmHnYcC6FSohKme9fJSi6LvIsjmA==","signatures":[{"sig":"MEYCIQD/ewewXFI6wsZKOWjLGH1C4WF4yIMLcjbDOX59DM/UggIhANp7jue+lWPgVz1X0xpoaVbHlkCXqs+KTSf8Ti3/xTN5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH58VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+7hAAne9cM+Rc1UieXFidPW61gtprP38VLlxBJHoc5nisBAOuTLgW\r\npdiO30CrHBh8aNkDg7/wru/jWFtaH8PxiSIeuvNoSJPwBBliIQOWQO6FSSfA\r\nWvBcXnr4RVg7pJcq0dNKxiFS2QLH4juRVD8iTyMSJF6pfWDIx9rX5nW97Sk+\r\n23qtM3YlC1teh7FPXqEJP6k/VhSEFZasM9FahKyUkaVe2bffN6iSpG/bNFF1\r\nDBv938G4+cIhjMXU1IlBhNLt3sECUJWqIJMQHHTDTzAaNiIPvEE1RpFOyRif\r\nbkQnylAV37S+GkRb7QmN5A6bjqyaZAAaDOuTj5Ba5oYWGWS7JhEGA141OwL1\r\nd70ooNTCOIrhB00EM/NmtMPIxc2BGdqVI8Pl135nNRa5KgLyINDfeVGtP7+o\r\n29ICgY8Bb7SQFc/aitDqwnwUVHkSSkyd/lLOVq5HycmYrxuo4jm1QSxMGr27\r\nSgH2Qxhxdsfa8xPz6vPJSAVoqjV+yQ/rQo2P2qGrU3hrCpy2HT7KBA5fk0f/\r\nHEnWoMyBH4UMesXvng6cgKmqB9hG8oiM3gQW8dwWV0erYSPQfMfoL1UHwnCA\r\nlAwUMKuyIQxqpEdF7mbwcTZ7O948ogFIYWzDt659Q6m92KL2U3afzGDwnMA7\r\nDIeKEARy0s0P+LGSOuSwtvbSgHppNFyXwng=\r\n=t9p2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"ec78212e5a236cf7a230c22b37bc30ee40ae0cbc","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.1_1646239509521_0.31628484127380685","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.2":{"name":"vue-slicezone","version":"0.1.3-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1c688d1f20e0f293cc72e2446008ab21e13acee3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.2.tgz","fileCount":19,"integrity":"sha512-EDMRqMUkIkC7UiGX0UHSwiBDafHjL0/1geZ1QvoTBAOPjVglDSNGDUI/pfavY2nxJ0t6e6H0TN8Sh31c7Wmbzg==","signatures":[{"sig":"MEYCIQDja4bmvOydwspKRazkJs/kfNNKVEB/Kz8xR9cGp8whwQIhAMjG7pv/AmpkDx40+kbuHbF7QR6HgdSvAojN+i9TcsfG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIO46ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp34Q/+O4l/rBh74vgibhz1rjey9sHQ+63Ts4FBL/bJWZmBgjnfaw5+\r\nHifi8oRK2Y9Dn43GeB05v2owvz0XtuuxfgbWdwBSGYwy9SLpJ67AZVEdPjff\r\nFI+rbPfTnChjVbxv70HQxC0qTlP8i4WoumKgR247t3tV1vZTH7GqZhvckqKZ\r\nts6oHkvsiEpFy9Jzb3NTrj5pN6jaNDXxJT5WkRtyFyUBad/TPX6gSBUvVU5S\r\ndYFB01Y65GQloditLBKU2ZKzD/D67atTObCxvDZW5nPhtsO1Ywg5quJViIhD\r\n7TLp1L+Pcu+7Gp/wqicBPUp6wW4uz9yyLLmkvlmDpMrpecSRQv4s1nrw1eCJ\r\nxwJoOd5xfTIBdiU4AD0yxbTrLC32B21jP24Op1M+Rw+fY7aEpV3nv57Nl3fl\r\nKWZ4ClRPkxt68l4hZTM0qwRFOdLqPHuAkqwi/LfoFgCcZvjPOTNbJokxgKET\r\nDHNJmykY2Ma+hKRyW3B1rGVcQaXb1immImvVctAG+DlbTwqNxbKdm+jOI7ok\r\n7vfv2Uw7Wg0VKuxQBkjBtlOx+l5vLKAp+NOCn9xkuQ8JWeniZZAUwQj4LLn0\r\nlpbBDYhXkebDd7yRL1fo7l9RggmJLIMNopnJTLnrFbYsHbBCzxVrg4r9uyLi\r\no5QNG5ZkzUiB6lLriwGGfnnOGCCVutYLq6k=\r\n=dg54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"696c3e1c45181e1450d3f42bd35b5c4739fa2bed","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.2_1646325306357_0.058194959189950435","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.20":{"name":"vue-slicezone","version":"0.1.2-alpha.20","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.20","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"05ee15ae1ae51b1a551c0e91b9112afaad6330fc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.20.tgz","fileCount":11,"integrity":"sha512-lHfAAAh1z7XrPdVy1WRcRWDy3l8e8BkKxOPuX4Bt6rSiSUhU58o4mnD2gB6mUg1Os3rqsnNmrR77yJhQTNCjyw==","signatures":[{"sig":"MEUCIQDXRN7vSjIoArvDHcwjup/lyt8rWII8LhSn/kLQsagbgQIgbAAc2oG5gHqTRLYtCa5mHrykK9TK3MPgCbX18jbD6L4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIPG4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMKA//Rqu8A3C8NiAFFQTZveKa8zwcpn2xM+LdHfWki/K2B8O87NyR\r\nk2KNFyidW81sOzZXqp55Liu1d3Qc44WuRe8+vfkJC0ace+t03HyDHyw32yeF\r\nOHfasSZX0j2o68kkNp2xokXWLxbn8t2jPCE0kVt2Bs5h0zUs6StJ1NDkpO3Y\r\nsVThLi4iAKfCu6PaPwpbR2ht31DLHTwHq7egI6ehpMr/GW/cSEfBvbNVX11q\r\nDdCp8In8dOBx0Gp+DhDl85q+P/FoGmf10Dw4KN6sv4zxU5E8AfOa2ThYB1yf\r\nCeALmx9z3EdSHjx3uTo6KwK5JQO+STGP2IXu+/HuzXjJjhJDK+vcf7EXrqmc\r\neT8yWVGzzVVROcXYxvXkJQ6SPvoljBagACUaZwqhm1oJkskqwWnfC1116qu9\r\nG0KJ8/H4Z5hJi89/Oe9RgeX2qdmNx9r3QQD4GmhATUPG8Oln3cm6/G0E5cJv\r\nNNUAn5W0Jo2kPFC+r1Ih4ooQWefDNHzqXi3GocGTkyGDRPBix0tRFvxblxwa\r\nLbYEkU1tyynRDeKlFAsAPj3axD7RMUVztcQCrJjsYVLtfCXWsECqkwMhSOQa\r\nmu50QZptpzE7AieDAtHUXZZJL+/UGrqszQ5s//Pmod+67I+WaVVe/8bSw2zz\r\n9RfxSwU4w09cCKksiH/7MRKuHuTiBSdwjBU=\r\n=16Xn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3f5bd241284cc611f31bc893086efe3feaae1c35","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.20_1646326200394_0.549372066905558","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.3":{"name":"vue-slicezone","version":"0.1.3-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"4ae9964c63399b2bedb48db5fa7068814365d5e1","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.3.tgz","fileCount":19,"integrity":"sha512-ebuhI9bwqqkCbcVdJZIgD5DwqDINoTxSB8K9MZSsr7vyd+Es4h4nKJE5uPhIVmVmKAxhGlU8TdTRmh7gsFumfg==","signatures":[{"sig":"MEQCIAKifP6mnl0STy557croJg+x7KzxDGb5Q0Yyrv3IA8YuAiACpxI/y8R1+xBoDexS11I0aPTQqcuxYU3HgJa1KqPjvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIiz3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRGA/+NxqMKgnFBhkfkfSpkzwVt2GbGoswyFKYxsxtMPFKDY9Qz0We\r\nORSLqGokSMVm8BdMq9PQ05FMVQbQSMgwmeVRbTN5ZQrDmFv4FFl2b3ETd1wN\r\nt1nDvtTdVnlkBJHCwXf7Hw1ivCHnjuxFzzECxAcQnTJ5msgQVBQZMsAAyMc+\r\nzi5jnELOgripp6zxykOL8wbB2jJXIivVokScziRiISnnkKkKKbgjyh4J0qtX\r\nVxtDX7u9GzeMH9p24JnV+lqTNfkTZeme+isG/ZKndMIxWNa17lLrUvFviW7d\r\nyeEPa79NaEjpBcRMrWJ3P933l/boM3fKGKy6OlJAKD3q4F1OwTwomfWlFhUK\r\nIQU6ewo374r7pplzvyt2wApfSILJO8ft6oJv2PPeflb4NKiVcXN2FuRC/dmx\r\nmqAclgH5LmhllFxg55KpzQNljnSB/j61g6q/5NDW4KUrSxQf8N2Vbym8Exwd\r\ny0k/S9w/hRg66uHMyqozjnYBFDc8mSjGtsRRcqVjyEFU+tyKXmzHfB6Dcx2m\r\nI2HTsYIYiNyJ5F99Td1GbwJJZVirPGzErkr0hjJiCNbVG9url0NsCOIhGvpx\r\ni0QRotzrFUS9N6UiN6Hp3Io+0VO+TfZOTSvIeLI1XbaxhIc91zErxzf0gtb8\r\ntxA54NBXKDHEPPMExh+40PTPHz6JAM2JduQ=\r\n=k16+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"65822e591d8c9cd4bbd8a587332881cd04c608a6","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.3_1646406903830_0.21722431976459844","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.4":{"name":"vue-slicezone","version":"0.1.3-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"acae2e3214592cf570637ad42d2187aa1dcfb57e","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.4.tgz","fileCount":19,"integrity":"sha512-nzn3yOcUuVm9a7BTJTlcurcqioN+jPYwQK5ABUdA7yYUICTfV7JFwIrLKmPXWwy9VHEUcgn/1ZWWc/F3MmhrRQ==","signatures":[{"sig":"MEQCIEORI616soT04bUY4lbs1cYtQmnmtzM/DCoZHCiaqEhrAiBZL3E/my5TUuz9M0czbGiWIlhvCeYBzb64oKVGCoEx1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIj/bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2EQ//TmX4YXnuYedP0kZI5H46WnzNul4XhjsSC9CwQ7/2pvK0na0r\r\nPtEHxkzqLub120fdyAAVqt2gi71NYWqP4O5v1kCRAurddGq9JDdeT9ppAeaU\r\n6JXDomEGyx9+LVWePWb3bvUg2U9I9xKsI0ndV41yriPDz6kW0oYlXOQJYWrt\r\nlXJTcIStfjtxuqonNHgU7Za75ECDL9LqG59tc5we+uz4JowABx1hzsEW2V1k\r\n5zKlhcqptBsVVxdhSi7oQ3ndMs1SxHxNSiFzpN+Mpmhe1o8h5XdzqjyiGVi0\r\n6VgrYAxn2WKsW97jbnndJ0YYirEwdY3eFvelyKVSgru8Ec1WXhA5AhfsWWlw\r\nPWoOYMV5A2uyqqwMvQ7lbhIiwCxNNzQtX6V3gsuCjJFgDh0Fsr0AhPipn8mJ\r\nJG7J34lk4xpwbTYmgClidfHE8Lr9l4zAeUHhPoGBcsxqHoDXlw7aSzkyye0y\r\n3YfDiZUkRuGQcYskY0jNRjikZcjCm6AMCmNf5lR5uUHwQCQN8h0uE/e9AnQE\r\np3WOeV6+DddyuQoxqgWzyW+obwmxu0G9+2eDbRcEqSs94T6gViP/hE1b24T7\r\ndjaLUH5ZeHb6wE/WpsLtuW4cuz8X4dZixTtXuDHG/896OlcSJsaw09Kgv1GQ\r\nE6E8dmM7jvgZEFo1A6RLvGNDvLQe0G0SQXs=\r\n=XjY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"8bb4237fcb5721ab67d4ae01282ef50b1aaee7ef","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.4_1646411739544_0.8957197086677227","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.5":{"name":"vue-slicezone","version":"0.1.3-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a6666f7391219169df8ebebb533f434c916e66e7","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.5.tgz","fileCount":19,"integrity":"sha512-29qpPmA4wZPBVKNI78IaPnaRnzI2dsAFFAj7gDdvTPT0lUrqKhJO+fubTv/iCjk1jeTKmjX0VEda0y+HyoeSDg==","signatures":[{"sig":"MEUCIA0l5oNe6JE8OL7/lAYrHM/Hw2e4MhHrotrl8/2fxtO4AiEAvFjA7W0xJ43yd0t+Oa+wPmRgNzQQzmaY3VxOOiNgzMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":32985,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJijGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob3xAAgEto8LT6o5gi0jj4H0kikvxprPNbcAkVJu2R39T4UQ/bYyaI\r\nP7ustHSqhYDHfiSworGnFfyej9eNjMMIi+AtAsNgEYsl7aUEs22Fa3iCGQPO\r\nGGLz2z/eZwXQy+ZRMMsxJ45k0vfVHnw5s3gngm05+iQui647qI5o2iioqaW2\r\nT0XJDkPcJ6v6S8cIuRE0a8lS/mPN99xSLtxaYHULYnOc99edv/cPd7/dSoFk\r\nJKcDYNVPIqJiCHCV4yvAVYo0iK0MvrVXqWZKKyrNE18OyjR0/TqDp0wwdxal\r\nlJ9CCQ9z6Lw2BV8B3Nke8XSFey2J3CmDlEPuvV1PBBbPtU0FXPe1AhBu8zta\r\n2gQjDTOPFmKF6y79I6B/890YU+WPZsQqxAgSYQpAixYWTxZfQ2h20WDyIXLu\r\nO7pahvuOuRfYZwn8hRHZue6Eat7IjYjdiQ2LMEw6DHtASjntDK3/NC0k+EqA\r\nZOs2mgQkjlrLtgg8tZ9W7hUMMr1/lo+e39qdzGtAzUQ5yWbmpIgzo7tt61Hg\r\nFnwtq8+zzOc1w996inO/sQZqaHZQ0iMDGlBLDxHvUtHvQHhdtpMkQ70Esm1B\r\nkhek/von59oZv/nM0K/F0LVD5De2TYR1Mrgag52CurKqB9tZxE/5XijU2Wib\r\nhTIAljHNAo+L0cz33FE1Rnp550QrLeitrlM=\r\n=gLN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a369248c4b35d9795438328866755c183f091277","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.5_1646667974231_0.062218364476704924","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2-alpha.21":{"name":"vue-slicezone","version":"0.1.2-alpha.21","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2-alpha.21","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7cb3d9dee0e042b5cbc9f1423e78e23acc8b5b06","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2-alpha.21.tgz","fileCount":11,"integrity":"sha512-q5/14LTbribN/PBuvFThVtv8h6iIIKlEQbA96KYadMmNUgr1S7DdrsKim8iG8WXEnIcWK2Ajtwv4eGoNnrVbjQ==","signatures":[{"sig":"MEQCIAOWqVxHfb6tHvD7A4eoYnpxurqy3Zdf0ASVQLfYQzN7AiB/Yx+g1c0GlST/AVgpMAbJKY8tHpVRrUhvBFL4lc3WIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJzGmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3ew/8DJ9rgPYleOxKg2WnI/2ycQaIzpLCt1av1Y1KDXk2tYEunNtD\r\n4+SWsNy9cYUSCWWFykqzECKzy2VETjOdJulNDzcXggEHlScPYnImJui7sVhH\r\n3Osx9913Iq+7WIqG0AEmrDHd/tWNrvddKGLwy2i55DymwEmKmqywzq05j8Ei\r\nPCEbeEY2YQyJYYUB2BdjyBWsaPnua5MurG5CtiZLGV8N7FEjkqoQQhCpmb8d\r\nr8feYu0CCuieaVQlGP+q4zk09UHKQmfXUnid0b3YABxD0btl+TJVKDrB1GzM\r\nxCfhUp++P6cBwmVOPnE3WrP652wbqIWW4vsSC+GMxzlZGR41jpm+fBl7+Q6T\r\n5ivJP5ZwEc/vxkmVHyObEr8ZeCYcrW8OS0HDpbCXY0IFK4hYTs45ReJ/hTvI\r\nV5P7TOkK1FEGEhUduDaTg24ocVnQd0By3ApBtAupVzdLZSjSoZiOtWnu5UXi\r\nFTvPnxiTYm/Sz/WZrBICP3XAHFy+X33DtBT83fDyn/n4EjXNXJr8XJE/PFcc\r\nslu8Boqp5T+3yuVO/BXAAAsFP6QJHXsQgcVgOnBDLvgnNcgGIXjYnCDbE4sk\r\ncNrvoIR7uUGZfyYeR42Csy8wt3D3RhF8VTUUBNsbxbKkoIK/N05KzI0ORKpI\r\n2U9xCaMJ6LMhCCnmwZGXX6eMy0G3cphUFpg=\r\n=eJLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"e6bfd5c7b686acbd24c42ef5f496aff4ab1739ed","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2-alpha.21_1646735781675_0.5077452215028482","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.2":{"name":"vue-slicezone","version":"0.1.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"b22ace5b0cf42eb7c21fb70f7aa8c20f9c4553fb","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.2.tgz","fileCount":11,"integrity":"sha512-+Vf46TwSoZLuaAAV7vTdcbWR46MeSsN3Gy8OswHkMIPBo5/Pm7mIZzxJQARy/CQAdwtRV0Z05G3Iyu3sJw2tRg==","signatures":[{"sig":"MEUCIQCneSM+UVDtt2RW6Olq0tDT0IH44l4+hWzbdSqNcur5UQIgCX/MoVDymhqQj6YatPRfvgUgV1AhYsTlBWKS0qB+UTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ1N6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGQA//WDxNs8uzdg9floqzy4a/NWzounR5i0zPiCyK6reVSKOYkyjs\r\nKzH+s51REPtRCeUQfjD9Gl6RmxKxtvxLYIvTP3lbaomWnqKXSWiAtHrbcEDc\r\nT+/o+Nhf1koX4E6LQTcNebM8eNw0ydIzodncmNpO/YAWQkvFdoLxaDIcDDvC\r\n2yyz2fJVRKFdxm1IqaG3rNNHGaJOJZHZVseri9myQtmOML729vG3OgCqIsdb\r\nqY9MJIuXOoJpf4GjDV1mseDWyWYj5J4xJcPpzzlOhACwK7yUriw+fVe1L7FC\r\njD7YH1Krq6EO2WJiMqfZmomeJrqrakz44A27D4uDr1U8RG2Hw9/opdR4B3by\r\nJgLKBHguF9/mzsJUZN+sLTOq6Ft3ICJnGGftynBSo+OgAKL5PedwOJjzmIjD\r\nGWP+hV6p1MWutW4c7iCDtcrO8arAyljcvNEMm+CEnEmypEoIvb6CFUjR3AQI\r\nJpScPD4KBLsOhzyVN4IV6H0fJsfLNsU9dB790KcQ2URrkE5nj/M4cFjPIMfU\r\nK6kQlw7jOljVWE34Wc5Bp0dzYVpGvUBelfIfWmXRvzcOAL77VFO8LxSuXHyT\r\nBlVuBgYhi2BWW6aP1rdyD0ZapJTA1w5A4fB0mGg/LtDJqGRrUl8xMvQcH+RX\r\n/UIrumd82aHLSwrs7IKAqikcGDL75p+pSa0=\r\n=DK6O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"8e1c78e62c4861cd6525448b77bbc544eb518b79","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"miniploum","email":"kevin.jean@prismic.io"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.8.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.8.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.2_1646744442382_0.327843405368643","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.6":{"name":"vue-slicezone","version":"0.1.3-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.6","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"23bf0ed60e56924a2d875f297106ad33def82934","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.6.tgz","fileCount":11,"integrity":"sha512-9nfqviBX8EzI85QHaZ1sveWZ15Za8YhR86cVPvcbyN/F3IqZHIiT29A/ACrF3HyfRUD0TGr7O001dKSXUW7Wrg==","signatures":[{"sig":"MEUCIQCTShHzRZyvlM0JF8W8T0J44RKmvieuNYPZIPL2m+Q35AIgZ8gYwsrcx3rvVY/QtFrKulEx4MOn6TSR/MwILp4Xfi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ3e+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr93w/+JSMIUJ5Si4mUlKUa1Vur7o7p3SdxOq/2ieBKULM8XLkgAOlk\r\nJVcrj0VHKlddqua86kYAwyVve9jhOQBMC+dmJKLKr9i4Uh5t/UhQ+JTe7NAZ\r\nxXLk0cFoT5VF5MzRqQkxxJxm8i8KJV0v1iJkLqSdFBE+7YgrBMJFOMM15eOs\r\n3/RYcDj1OTD7eHEeWXLXuVv3dncnMPYh9PJyToCW+OmpBqjx+82kyFU4JAPO\r\nzOkuM8FVbWy6xhk9Gyl0mr6jn+RFBqRMpYHZATwLQIFEDhkmWK8YaDvNdtjL\r\nrHPwHZDTQsGszqXVJtYn+Z72WFph0nfsog+ph7Tdbyi37E7JJ27Ln3K0dzKi\r\nuTgNtS2Sl2oC+IIPjfCht3boiNlYWfNDI0rsUBngn2RqOHshwiKoUK3mIFos\r\nj5vR7Lw1mhVzHhNHxShJeRII1KmU5mwNRFO0EXEFBQd9wHOwov3sgzLFRmZ2\r\nVAM/L/E2ohgT3pL5EnE0qnNZ+gJHD/mbHjQYrDojpC1pRlrrwwbe4NsaK05F\r\ns5MLHvT4vlZX21mBi8+qcHmESK//TdswSukS/h1WzOH91zUvMJIwZo5KuQid\r\nhjV9X84vipX/th2vzgqcgfwZjv/2RWeYe+UIoSW0fPNdon5bn5qix+hdLOTQ\r\nGNTJnvODjJItSAjIM/W/qFqDryuEoqay/xo=\r\n=5ON4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"e8b321b882b045f402020401ac3f8cff29a9d08c","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.6_1646753726022_0.3448516416198162","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.7":{"name":"vue-slicezone","version":"0.1.3-alpha.7","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.7","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"38fb95ee01d59078080a4bfef8e31c625e97a85a","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.7.tgz","fileCount":11,"integrity":"sha512-Fx6q7ZxYGWiy8Fnq0wpdX//umjkNv4AhmrTn09Ya4a2eCy0pFNmQMDu0ynLNpYFK6f8aKUhaqAInKchUGJ8G3g==","signatures":[{"sig":"MEUCIEQ1Cys6fwdXR/pE5TmSEwS6yH/7RYixyxr4ll4pFo2FAiEA5hQBDfotCj6SLjMq4kYGhMOC/OhVSTg669N7KfY+DeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKLisACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRqBAAhrEEPFYhl5KRkCihBEQopS1DEPk3VpY4pTNa700SUZUuNCnH\r\nxa5VedIPNVarZfnNgaZRMkBbM0a7RuRdK2sBFAKK759DDzgFiuRiunTjuza+\r\nuJi8+4vOjlkvN5vprmYHKuOV+pqvcPxeJy6YaMESknhBhIW8xRN8FMfZdiCj\r\nglToHwN0F7F+ekkDKLMhcNanueoiMDy+mTCuVPX3Uz/WJ1K+gsjcGW9makw5\r\nNO6r0pRbBwqR+R6u9k6JwiB+IKEKHYN4sQKjSQsbjs92WG8Pt72b4JDhMGpg\r\nnVxB7R/vW6IgAKZ1+/KK516sKIGzxGoO40FuZxzJMJ4U4/UcFUfOHKoInVRi\r\nXY+ALnPqyXrXkySP7DHpRV7hJpUh9+j5MwSvVo8q2ZUQSiQb6a9cW5EfeY5+\r\nI9zUxuibaeMh0lYRZIpuRxUL4bPCLSxAhqMRalYgFMSlwxo0vND+5hKd00GN\r\nroN3fwURSU0s0Y5itHwBWv+wjUfukkOArwbVfTBsQCMDwPt8qbVX4oE7DcS0\r\ngIv9jN+WhZYBYhP6cFpOzVBXNYBveKXPmzJb4Gvc1t/KTPdRe7tS9Gqnvu1+\r\np9z0U8IeYITEeaSamTNSb78sMqL+vsHSr/4m/SqwZRtqbmCTwA4L8ImRNORn\r\nJKQYbHuhXB1MLQY6QXJxSii09aRwjV0I+Rk=\r\n=ydop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"01f8415ecc0beabbf8a8226864ae4c3b58916892","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.7_1646835884397_0.32936275246064484","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.8":{"name":"vue-slicezone","version":"0.1.3-alpha.8","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.8","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f835422e099e50c91b4c9972b5eae564a3ca5773","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.8.tgz","fileCount":11,"integrity":"sha512-S1UWLrWnfW5azlyiP+cDX33GtdeyJKvS1nk5KgLGW7do/JMrb2tTKAq/4CUDWwMUaHF27Jzxwevv4+Hpnjkz8w==","signatures":[{"sig":"MEUCIBB5FMT5BTXaBkbLhNmI9CzqzVfFwJu+5ck0xbrQms/AAiEArykWBeUR2sEGzqRiizA8W2iGmiLW/U7YYFE58LoRglQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKMBUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZ+Q/6AuRvbw7rpuvFUqqSVsqqIWIox5mFNK7l+zm5w+7HA7pAiJZc\r\n4mVYZWsLNINOqDoKNkWdoHRLEX4i9SBuZjvXaEfcFKAJgGe7KRKLgPNSmK31\r\ngs0F/MxkjGs1DAKB3bWnf8FATdko5lT9m9EQHtJICkjLSIhwwv3Td3IGl3HY\r\nzE5e6B+YVHWTJ59Eyl1b9z214rMFQJ0Axnbqf9+r5KqVVRdaeEdgVl02+QiF\r\n452iUndRx4S8zd3rDTPq8brgdYiWn6QG0sbkF7qMTJSag0MFIkglvmw7Yfim\r\nz/ON3TPLcmUSZf8+j5aCH9/wC+xVzx/v2vWeh/4SCatl6wOqL2Mma7Xk7pH4\r\nV/KyIOe+yawjGnM8jj8vEBzHxJf2Ma9gm0O/bnUkZTMFY5MIrDc8svhOndjO\r\nVtwmM8SVnvLhHP0sRBR61eqcPCr4eRa8o5AdDJduCtAlw7Ao8LH/GjpWD0sa\r\nnDQBV1ZwW5GM7KrWVNS6Hkj7Tjxi9BuuAJe/pP8qKKIlQBzeS9Hqzen/hEQ3\r\nLeER8m3YW7+QUbhadVVoezBjfd8+zXrZBVH76U+Daeq1cfhx5RerYWtxaszD\r\nlhr4rTTU/Y1IYUYe/zMjYFr+bgzrTQKKQ5I2e466mBkITbkHd+e+h+LkzuYt\r\nq3bppL8qqVdYTPVwEHN1a6KHDq++aOAeaeg=\r\n=AECb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d8531c6836c79d379f7f379060d34b2ef21acaa1","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.8_1646837844534_0.26419652527984017","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.9":{"name":"vue-slicezone","version":"0.1.3-alpha.9","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.9","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"a86899ce5cc0ab94451886ebcb9062e7268688a3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.9.tgz","fileCount":11,"integrity":"sha512-oMfXmtsSeaw8j59c16Xkd8YZ1lVsvRZGeqONByez1yqxmzp4C2dySu3ejdmvVFeECOZwLnPJiJr/7vMrLQr/3w==","signatures":[{"sig":"MEUCIFxO6KGlt4R5zXaUZUCGPh1S1Cyid4v77JIhl8c96yf4AiEA5ClbdcC5IMfT+QCGn6rbP1RBOQzFSssRrKNK88sRjtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK2iwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8Nw//VFSpTo2ogarEseFeU1gvMS/gMDHDCGvFoMXljYftwJHzt4ZL\r\nnf6zV7eTOhGUrmkM4iHE8fDjTXkZi18PLSU5Ub2p4FdUphzoxdnuBFiGzeGx\r\nOZJG9NkanieUvfN+K5NXqSDkUZP5pd+iCXoNsjzPnL4SoMmtdPzz8h3WyriV\r\n4KgeVh6LM9ryjMGVnJ2YiQG0EEfmSUdJlZsUhSLfQ+fERC9z/rg9SmH/ANWt\r\nDwE+PQyUQJrZsvvOPzabvG1Bnc96fTydoD7AYdhtj/GJqiKFyzC27RvewsFv\r\nLE8ho/j07FPdNc6sGOslk8KWQMlFWqcjVt7rUIiJ2Gmvu4OnIF9RxpK8wPeA\r\ngO2MYODUqWnOIRWAeH+11sKPi6Ge0iAzJNXeSt8zdNAqbW1kI7hP6iclJVFq\r\nXfWO6Nmx3IE/0q5WHpl/8DuOU2jLlLWdBM0twybGgBa1MSG5g8QZQc2tmgNL\r\nR7KXHXVWXrIbxX28lNPaoEVv5Y3t/TxnyGl+lz93ANH7jJ+MoSqhxUvEGEy7\r\nDwZtkWxC1gWhviZIMML9Rm2t/fErWazFjHxLiGWzxdVb1xZ7Hn1fetJHIXYp\r\nf96dZnYwUk0mIRRVpv5ZzEnoMe6Q0IEdl4PpVnrO9693OTaNlexnIgrrSh/I\r\nqbkQvoMOYWx+9LIlhCNGEsgal+rP7pQ4SIo=\r\n=RwsC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"28aa057bde35c530eb362cc8cb2ccd6d72242729","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.9_1647012015956_0.16574257174317886","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.10":{"name":"vue-slicezone","version":"0.1.3-alpha.10","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.10","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"1f24dd0c9f108996c3e9b019f957a75984e55dcf","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.10.tgz","fileCount":11,"integrity":"sha512-FziQrYvxOgFW429RHIzW1w7pIuwoxpr0jq3umg3nXE6gRnXrOfulUQ0vVHPZD/08LQqWDs7D0Piq9nVJdbC3Aw==","signatures":[{"sig":"MEUCIHPLlggnrE7+7UZf8ZudZ7yISadchVii96nieuC+E960AiEAwzU/Af45fLOhCfwHouchI4yHRYe+AkQpAvslobKNUwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK3LMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpagw//TbAy5iCBRQFC7zdwIWARTj748dLfdlbyQXQTYrmeKRAx0ynN\r\nai9e+EuGgid6tbLxLKoeeiykC1asWINc5CyBqu46oMDf8UKLFF2q0czIIlQ0\r\nPsqSEdRgb+ornzND7/XJlulEprhjH3OnZV9Se5eX6zq+iANMRcGLBdiwkmr+\r\nSUbU6bFJ5r3cRWlFS3sK9piLcJ6ghtMdKyf/S8TWeG7LZADwrvH+nJfGzJZH\r\nOy4YODs7xxOi0+QquCcaHSrqT1O6OS47XTNi0PDbmuC1NJa8/WMzki6LwKd3\r\nHbI7K2mmNxnfkiMDA/Vz4SYLgrmMcvxDyRQgxvoF/KVXrCQO218bic9WfYU0\r\nwaV1LysuaEEG7/VoaeEofUNrY/4o4Mcxj2xC86yDEccbQOhAzTGB5jIWfu3C\r\ngfeBGMPvBmXd4LU5FFASWD1HRcxTtxXTbEURfY0IxxsDGMZcc3Cj3g1g5L40\r\ns08hjtXEgfV0lDW3OHtAMxjnj5Ubajr8B0R3VAh8k+jUhQ3imUaU75GzdUhC\r\n1E1Snqg8T8yaMpQXVBmhLs6Robh/0QfPOi+/MFUpXUoKz4vDHA3SpsgPRrI/\r\nizpNI9oGl4ycIJ71alZJjGL91xFsagIMVoz2HdP4wkZ1OztDbgGlZTK6CDGj\r\nOUHJ9A5p0Dc0yJCvnUf6dfdJzUGtWq7DpPM=\r\n=6BRC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"ce27a5de4e4e9820c1d90a353b5c1954e054c906","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.10_1647014604768_0.4211845755424495","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.11":{"name":"vue-slicezone","version":"0.1.3-alpha.11","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.11","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7b0659c4a39e995f9d34e98df8bef40adf083d85","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.11.tgz","fileCount":11,"integrity":"sha512-OwhiZu5Nugbg8W54hW3bhW0gMVtR1Gc94hDNpVE7qkG3lolvmRB3eT/3BqFafdgvlWMRc9nhYUudjzJigOcegQ==","signatures":[{"sig":"MEYCIQCyarXHrUKeIYur7KgCWZBADjJtyBWpFUvcyJuSyzoTbQIhAJGciuadpiCv5rO3Zcd2Z+ACT4xe7g822vyIzS80p5s2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiK4KuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnBRAAl4qUNG2shHwmN7GReYTTZxt6yYCYhWCglN5O5FPOc25mIA6H\r\nwEkTZKv4W8pQ2QYQbmQaOFbV9LdbdJXSuyXaNGYHU6TN0jWfadPq/OvLtOA8\r\nWfvNxOkvQg4np9DLB/KVbVuuCAui/AblQkR3uG3bRK/0vxWWQ2dy+HaDi5uc\r\nfDC3xyHbOIC7CDxmtMHq7/w+jPkW+dcZbDuNtoLLFoMnulqm/7by9ocsSnnM\r\nee0K9FZusA1TSQjrL6VW5ZUjcNiNEmPSH8+EiTqz467rPHOrG9IY46KQoVJY\r\n/JpThndRdbomspPWt74bEN4I05BzJrCwRQSPTZihYdn2FMrlOuK6kk7KrGi5\r\naeTX6Lo6rWJBS+7EFYFZLh7O1ccN7R+9hsCTHW8vw50XUE1tZphpKmwaxu9g\r\no0BWs4PdonwTG1neb4MTVe80VQvKhPtOJj90mpPBRyyCOlLaAWuAeLOTZd2O\r\npaE+1A9taD+nH4FHMXaqVLVL8ZSSvMzrEnySUwTFhqafhbEacoIWnJ44p1QJ\r\nw/nGEShCHEp3TQtsL6TJNYdtzJMjmmpgn6RZc26NO1Cz3cHeCivtLB7QAo1v\r\n/tMjA/h8etqyP5r03toaWrL0agV4ncaLQUh007tGnI19NqWKsXJqLto49uuk\r\nK5j9SdC3XLc4qvY1laXIFt9biRrPBubOx8I=\r\n=XB2N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"4afe6b1ed473ad5eb7101938d18e6da5c83947a8","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.11_1647018670657_0.25743222857274706","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.12":{"name":"vue-slicezone","version":"0.1.3-alpha.12","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.12","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"ad29046c4894286c58b7c84acf371ab39db2047c","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.12.tgz","fileCount":11,"integrity":"sha512-Ndi4bUaGsYyznoGEZm4DyWaJ0g/ZAuyFouS1lWKNrX/ZuhjVXpwtW0rzkqhY7diYTMRDlJsrBYxDkNzoQ+ax4w==","signatures":[{"sig":"MEQCIBgtmbdoeBAA3wz3eIlUl1vK4kN5oKqWhfB1//YmrzcnAiBqjf9q+kdfQDQIiIWnaJ90xRdbPIcJH0qn8yK2MkWy1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMGpsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUoQ/6A6142rVeVjwU8gwHEvb+WA9Zo5LzR475fyoWkBkFFebYrxhD\r\nnSeKOHlrb6IZDG2wPJTovXsQGyV2Q5JNZ0L56fc9RjoVLLaFqD1zL5JnD9b9\r\nOjAb1lD6wYfo2qzWg9Ff4jCrg14Rs4f6iQsE9TdBsCJr+zIJWWUzXKKXTxv9\r\nSOHseNbVqKmDoLnrgkK75DW+B/G5y/vBn3Hbdy4bYqjXtfTxPChk1OiSte/z\r\neC646zL5Fmkx44qWBQrOanli8UeCEradfVEWTCtZWyCewz0bUq22o3uMNgJ1\r\nPaRK9BfXi8t1UhABFYs8nneKycpK0T/74fmNCUID+C0DVnc2dSfgeodXnIAH\r\nbIpAV7FnYJwiXqVWugYO5YxmVDwGQlzeWfN1k2RTXmg7cbtDbwqrPEMAZ/Pw\r\nfXWL+dwRvGOTSiH6igCp21Coyp8gtHrTbK7KkDKX/lenxajpj2/eiBsuXPGv\r\n8WFv8wTZglLb+GkBE3VOFrLDI33/kpcYKk+WblHn9bmGP0dERutolV3LIPBq\r\n5Uw4XJS+orM59alGmp6pmI01wdQkO3xLz20pJTOiM8mAMBX7zeACJEQYewOt\r\nF7Opbv8YSF4zXxfvJlva7x8lyFTYTNoiYxuy7bJCbR//X+Rtxq3/8fJFeRfo\r\nSyn5vt9YIiEuZdPRymiH8SJK39+E3wFOHmE=\r\n=PugV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"d3fcb81a600bd733ec911405f35d44b562703c2f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.12_1647340140708_0.6457758693165787","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.3-alpha.13":{"name":"vue-slicezone","version":"0.1.3-alpha.13","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.3-alpha.13","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"c4427d279db9d9ff733ec9f43fa3ef9f0d9ccb40","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.3-alpha.13.tgz","fileCount":11,"integrity":"sha512-e+ZbgrFfjXvoKMDrrzye8QRRMJLhiTiz2BFnXO3Cw25lYWcMRyOB9h94+hygNLrGvKZ1q1vju0IPdThdxN7RLA==","signatures":[{"sig":"MEUCIQCQRGzjrHhwsNqu7LXNDiLkqGAF0tPuTp7oJFO+MYY4dAIgcLftWMW1xYUzswkS9CyhmQThJ1w4sbwo1zGFMPJ7pEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMK7vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMVxAAk9odcsB38+J0gkCBSt93P5ORmbdTJIdHew4bghBuBUlPgJhh\r\nttElkb/VHt4Ne6e9o/NQDSC+/Stk7nfmGtdSTrxJpEdzJor7+tYXyZdvoav4\r\njphWlGgfgBkRaZzUiT0ncZ3AxENgQR/W+07BE74FM+UtO4mNuKV3MgLbvIJI\r\n8RYIEiWNmNXEvftKCUeLE6xie5+egflyhPxd8SZPR5ixH8HU1Vc09VzUnBkN\r\nE3MVCJWx9dKQ/2QxHYjTFjSFsQny8/r70roWJ8Ythqe/h4hSZCDweS6rGeOx\r\n0oBdOBHh5Vf09X7/b1zcP/Va4frhSoz1PTw/wQElhsZ/+gYmrO2yZdIjQEFm\r\nvpWLEuypRpw88f1K/gTLJvkEpEhJHhgyVAyv4pw0rKB502DjRjOv3ozHyAtk\r\nLeCBanvHUl5l7l3TLdP4cFAsLQjfsfMYp7ZY66i3OqV08AwpIuKV/JMajjHp\r\nuGpsDzQn8TPzRR7yugtDUSqUyihbMsY/Ui+4lT/tWFHoXcEdguKS5KZ5n/tH\r\nW+s3NZk9IFC6RvpxAs5PYVg9HDB4neaL4HuAmKvAP37fPUNkYrbDiTMkpJc3\r\nD39M1bBe34zBLQf+5KuOICj9NJPPrrlOuciDE4muE6Hpy29AV3tlz0YqLSGn\r\nPUypNttHSZRoHmDvu/I1fXzgX/n12g7NBO8=\r\n=B9GQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"454e19457e9252387e8f4d08076ffd8901d2582a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.3-alpha.13_1647357679647_0.6914127346539305","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.4-alpha.0":{"name":"vue-slicezone","version":"0.1.4-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.4-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"974e3f111a686a38b8e8d36c6654de4631714414","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.4-alpha.0.tgz","fileCount":11,"integrity":"sha512-R/2ypIjAXRafDszn16xKa7Wurg5dcF87ZGQv7u3dxizSu+YbogpsqI4URrJiM2hCtkuqTepv9yrNamM+MvsA0Q==","signatures":[{"sig":"MEUCIQDVScdqU75kaioccPwuw17jeoFBOkbPOiuhmIm7l8vJ2wIgT2hgpG2EIHUg0Dj37FAD6Xuvp3beCOHa8OmJY15r2u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMeeYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Mw//WIZvYxSf3TEfmuKlIKQ+qroDhm1JbvB5mIjsXYpf0/EdKD04\r\nlXaDphw9PHQvZxxg+XH21BGZFtGVChQU0SALAElB1dYNrEcm3FTkCPm5sphd\r\nW95zKgEj6bMx+FRKE0s/2I+UCy9BXfg7B51OtXJh1xRJkkqdbXx1SBgqaoST\r\n3/zHBvgPrvxGe/1b5Er26WKLWVBGS61P7Tx5EQbXedBeIeLOliPXP4YajmW2\r\n5wHdb2ih7Rw9+gu/6yL8EslEgIQvlPAUgPDZq0bZ0uVyAYOOXrQfXvNKR4Vn\r\n09AP3dOlR65sglYptFWn3pSNLzg52y4+21AXkZIqTH6Vnw35RRxJKDBazIy6\r\nTf9KPEybcCODfRi+UcI9CtHHzIyRA9rHMxY0pEwL2SW5gWZBug7iyHiX2eMH\r\nRd1EjjrU01L68kLDIC0QUjzUSUVEvn7RnBfxXqQUSChCdfr6dgTBilLo8hPP\r\nOakfVLfe08FFIAnKffJucmDzYHLOFSPP2n/xlJvtEEdYTBwjK7ci3wYxfV6+\r\nX69R5ygmAkCQLQ5Ui0GMRRg1FuhxVkGogyak9JLmF5yuGP6zlUaFGc2rezVy\r\nQ6bBIeZiZ99UVesJciVLn8iuUHX7SftQdr3OIzylbFy6jeHw42RZKFAIVvTr\r\nbahggDqH2rE12n61jIJtAci2pKe1MLBnOAY=\r\n=VHrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"40b44d529f307f573c1d73177a3bdf38bd7860b0","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.4-alpha.0_1647437719884_0.09294529523348949","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.4":{"name":"vue-slicezone","version":"0.1.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"eae1e5b05b7bd55229195bd16bbf938f6133b1e6","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.4.tgz","fileCount":11,"integrity":"sha512-SjwyuvNjYuYKIneUIkWaLiWooTKRPzE2J3habKu8IGz1jbTvdsGTcMcnzYepKzoZeqX1Jezx7m/pKy0Mcv+Jeg==","signatures":[{"sig":"MEUCIF5U6rHP4ECOrdYoSx/JVBIS3tbZ9E16nYboXof47/AeAiEA+U+acDoE8gNCduy1Ti5Vfx4xUaXx+yBwXe793eB/Tdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMe68ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrERxAAgjjFnu9TQE8r7d5o4nuAJe6NQjVfJDIc7F5ttNoRZYEApcAf\r\nYFAqTIDW9rIdO1gUY8vkwcMaNE8mZ9KL0+pklIS2bF4Li2m+fY09aJ2hs4N/\r\nHlbcuroSSieDidaB0FzJ9qY9/rzEDs8B6LzQrGIa6t5icEyRAVQgLEI6jjNT\r\n17jebh0BBzKDjqECZPcfUbuCXnAuxeHS5ox2kNja6wzrpY+NZ6L0KJRkW8mf\r\nyyCd2g58Jmkg3Vy/HA5bhPadh8XP56SwNGUYelqlsewtMoRbR0IvqRbKKO4q\r\npSwKaWW2LSexuBRnnQYYREZUKS/moZW0ebluPKVvNvJPG4j7Eo3mh5qmF+mf\r\ngxUdeuSr/RDIoinqzc53vtWyCNAWf7TWWL2+N06UDAhbeQ6N3G72izjSGkEu\r\nMmLflURfLiRxi9MNk4HuioQZV0VbvJuUCJOFQWXOwy9UeRqwOM7rAxa1weiY\r\no3HlG1oxVvnrnlvJV0qa9cNHnruS4Wnz+fd2L8b1UcVGp6S6KvTT01KtT3hN\r\nO0PWD3vmB4TVVM9viJQcHlT+UsvagRDte5Qlbn7fEWbA64qKa2OozNi6kl62\r\nZFYKm2PhjN8wTKAtrVpu4AZ2JbPmHj6sZsP3fkC5kEeqQ5hkDkn1KaoL+Gzk\r\nU0NgBCjtkjM0d0202mIUvlk8LUbY8TTl0Rw=\r\n=+Jg3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"379f1c0e7b17c67e8bbee44f79f5b8ecbe3a559f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v17.3.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"17.3.0","_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.4_1647439548536_0.26660192891244594","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.0":{"name":"vue-slicezone","version":"0.1.5-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"65dcc116659f4584416caefe474e68507cbb64de","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.0.tgz","fileCount":11,"integrity":"sha512-juC0JMS56dyJpQ2hnE2Nz4BNxMhIegssz6Ynxi0PE+YpaeovVPQo3DOkdCKrSVulhbzRGD8vGfR9CzyM4B11rg==","signatures":[{"sig":"MEUCIQCW0Of/TjQDSrNBSzpU/FD9JsfcyP3RrzbzfNay8wEyoQIgJAp639EUBzaifSub3kNz/ey1YtZq89xZQ7XJPZCtBYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMfhmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkEg//f41QPQ8PdeM8RmCOOl6xo+IiB3jM/MdD+CDnq/LJmDBI5jPX\r\nvSlFOPGvmbLV/bqn+LVya5npxOib3Fy512JCrDWsPtUTrPb1iNkAAhrqrdlU\r\nIljSM1EZ9YdjZfGS/8+I57wWLc+u00Wh4IKpFPwgbyUiz5ERofq+/HuOy3PC\r\nTLNJ615r/BNG5t6SIXmTiVhdGm40KIkp2I0dUuvREKDPGvSCPXtBpjAWg/2s\r\nTHrGR0Ll7QSI1U7yCZv/Dvx9otxyyFLQjCEANRcO1yBVDAJ806L6bMMHhdzL\r\nXmtLD1I8yCFVwhTklbpcVgaJEzGvFrrtNphPKMELvJdvFbfDzqelP3S0tw1b\r\nO6AZBuktN47BR4k5oEa2+ljcNvX0q4ULUL58N1GA92YPHGO641CmTngfeM5h\r\ngffJ0Um1vb+A8GEyr18dqxxQ4VZUesEmHwqrVALzvW+GRACtxR43aGSHH8Ms\r\np60ZWvR0zs3XVm0jdAihF/JFF9xXkk5BuqsZaX5nhTpG6vE2s4BEOSUrahaL\r\nhSFJc0TCoW7JmKvYmv9f3UfF+BiJmtIZ/6UvRSD91FUmmUKm9SPBgl0wCXHQ\r\nIn0u9VHohzk+fiaQGg662kdUilpx7M4h/Fl4Vit69CP35hdD4Ho5SRz2Fx/o\r\nBxg51IZa5NIHojcFTd/sTW5+7QAk1KBLhW4=\r\n=CnEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a71d6caae587a3882e90aff06caaa62f6be19b1f","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.0_1647442022042_0.896793735263332","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.1":{"name":"vue-slicezone","version":"0.1.5-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"5ee740718679adc8d8e9b54eb3320cf8727aca42","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.1.tgz","fileCount":11,"integrity":"sha512-DDrvcnaT4u2z3zxVC/MShFMzM1iOYq3x7WDVRs+i9vgXEiMXx23wx58pEt6PQSXKJUWsfpJefOYSSfLCNi+ACQ==","signatures":[{"sig":"MEUCIEnWu4L6k9fQPU80l4xqCuaP1yiZRTjjxF8LxXyZXJGwAiEAxoTUBUy+j1gD2IeU4zB4IqC+vSe26F8yroXoGnqrwMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3RUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+0hAAhvQRohPYqIQxopdDMtTkA1kwv+0IxUXZpxu7RCFl9z9zs3HZ\r\nF11S/Y0/LELRZDWIlV2Gm2a7oDZ8R6wgNib+C+vFeEObrrW1sAbWVHW9yUKY\r\nUZMlJKUnMnaij2NJb6kIbn5GTbpkMb4W76I5f8vasCPYWKuRbL+qV53qjS4R\r\njrVXEhhW6G/TGm82//zvosv8wpxfjyxSiONXDE1p7ZLgkx3cwVirUagP+c7c\r\n+KraGZaaIilQkhpVe1cqDO0MAsr9bq+/o+dhPhKm+ovv8zVE5gCBiUwH+j3z\r\nUZt4fWDsRhRdQBBQTwnX9D2K5rc2aXypWk8Ur4MrL0kZTQ5AJmFOpqCRxucC\r\nz+6nwDdu5QYAPDyZq6R8BxoeoqYN9C0bk//HDTwS4OzT7Kq1zlJ4p6NfjToq\r\naC3QkmJ1DFat+egRHhx2Gi/Z7AvnOh4JnmsUT1BS8pEg7IXIAS2pe6qb7zFO\r\n+D96L96ANVNISeqtdv3q+nOHdrxI0dP8Hn7eQi2bV0+s7Shc0yjlOSiLjapN\r\n56Z3L9rJpYlaup04HEeZlRs+iJ7sAS0bTX7GVGeQLmihT8vO0MV+xe+ceSmL\r\naNEvnfqatUzXjQbN/nH3+4LFlP/kOzHarj7Naf5LBPbzy14bP9BICr33P0I3\r\nKMK3DDM07l2/wMTrvmujK9xbwa9HR8avjhI=\r\n=fnAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"aaa323d4203ad9a967d2624708cb40044276307d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.1_1647539284707_0.34884511894625514","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.2":{"name":"vue-slicezone","version":"0.1.5-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"7933886f08d8e690bc2033520f03d355f433e26c","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.2.tgz","fileCount":11,"integrity":"sha512-ugbu6zJ3oCAHXo8GtxBqfcO0IVMBarzxu/qQQ5DFUGNJKyvWXisb9cRx4Y9opDc8vqKiBwIbEcHTgiHYRW9hfg==","signatures":[{"sig":"MEUCIQCCWjmV7O+d9O01Byp2tsP6q4De7JXfep2cigb9F6ucggIgdPa3VLd+3C+0sa7TczthwKkS/ShYVzjhoiw9NaYGq8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLBkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroCQ/8CWeMNnE4oPpNu3pwKokye+rKmRK1Z+EYZ1RscOiaDyN846TO\r\niB2esm5EEa5pZElKDlWYagpWrY5PEM4Y0chUWvLrVTHkWJVH2nh5Zpoqfjyf\r\nq7vCWDHzFLCFjPURo6RFPb6S7RHl9yULz3VYZsdw9B5tQ52F5ROqltsxxFXC\r\nC+H0oGuuvVj5+kf5OeEUk16nUqqHSRxDNWwoYmpsGVVjehieSFI3s2qixu4n\r\nLZGGJJlOuPcpbRDj3XqG73xbMVoAjk4IuLqR3HDPGmwuN8H50obM0A8gpWGt\r\nPucLKE6/bvIZ1U0lqSj8CdiBoDNaH5qo9US2ftBapGzu7oshFS0ryiaToKjh\r\naX2GhUPDHXP2lg5bKzeaumctnVETZqY6JsXxpWq4npunHXlZNPaEV3AvPgsJ\r\nMz1l84SvG7NrKeiDleXb8uuqBNZiMaMCCMJ3xMoREmnC1uAyVSww3O6XlJcJ\r\nz7GeVoCk6DzEgJAm9aOinY1HirPOJor8EaZtCamsF8ABQOmhN/gEwY/skZHB\r\nJBfixW2QGrK4eq7yYxCgsSMaRDMIJgmbcPCFk/qtWJPcsHH0gAopG0VCQp+j\r\nOgyg//1epsSQpmpdI7eCeJ0Iw/21wKJwExAw3/2DlwAFNSxH4ZteMJ4BmXZZ\r\n8R3X6E3NTp/m9tu1GZde84TT2Qjydz0YTng=\r\n=hiYZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"fe7b2cdaaca691ff0b5d3ee22d2c663069a60ab0","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.2_1647620196724_0.24096923197368558","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.3":{"name":"vue-slicezone","version":"0.1.5-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"3dfcd852ed5a44aaf3cc5bb5cdc3e6b01a574a22","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.3.tgz","fileCount":11,"integrity":"sha512-8eIjtCacJ056F4hxgZ9eIg1jLYbo+ZIpfQLbn1lXgDHWeVmODEQa4Vu1Q77HtW2hpo9JCLqHR+++/SVRFxNiZA==","signatures":[{"sig":"MEUCIGjf0brscI200KDUuL+9bpKWfvJltsAILjMC+dVxJsOEAiEA5kZDCIDJkmu3uKPrinY9mHFfW6hhIsK0d9xvHvP1Pc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOv0RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPAxAAkwnmbuhX3Gl6nMvwNU2iVJKdGjjwmoLdhaVXD3ZAEjnFEDv8\r\nBoeVGWn6FJSKTpre+DulHooM1JicbqyjDGy0Ho9vZ4VcjNQTIgcwiO+Qjffk\r\nbrFID2U2p9PFow4LTFlo2fuimaBPGBhjejh/fjCEynf0Gt4onFXsIANwDj5Q\r\ncigy6xW17hg6fCA4+eAGZr4GCoop+NPYXQ4v1PlaQIRHy6usYDFs5/vkTFAS\r\nL6tH30XO59aoLgy4JDAuGwWf71+y5KxMMb6N9CWBqkw8SKNtjnfO2gD4068G\r\nZFT1MjLpASKgtaXRgr0qJ1JVP2dbhwxrA3H7K3cZK1Tj56WfUYHjXikcawlI\r\nyefGRisEDMXdqgrNX8ERZIQhEZP+R/FZoRCm0xwe5fzA8ZsUKLXNZHyr7487\r\n4VtzheKbXdP5fUQzfW7002LsAiS9KfQaWDNVfUO6yWm7eMACamRquJpWIbod\r\n1rGnU5VyXAzLegmTsogU3QzoXwWleQ2yoqXwp7xA6siD9bUS7vrBYmcpDTo3\r\nzsh6V99Rt99jJu6hnrFTeG7+EOYVj2uRvEMn3ap19Ileobz/BKdKYB9XAQBv\r\n7uCH/n5zFv/k+HvlDnKUXzxpe9hF2ANvFVtQD50shFEoF2V3BXXFfb/EUCXg\r\nQsSbJX1wOR6/DQdsvDFpUF1APhW4wdwxa90=\r\n=kvTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"b71b524101f4dff9420aeafc5c8145dda7077f5e","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.3_1648033041644_0.9222985682195697","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.4":{"name":"vue-slicezone","version":"0.1.5-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"530dd251c5d385987d90246c96960e0ba39e62b3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.4.tgz","fileCount":11,"integrity":"sha512-uHkWa3YCW+pAQc6aBtHKHYwZZTP4gVdTsOrze5FF1PB0f62eKpBXAKAEhRN4vUJ1qUbW99dENN/uc1DauLYKcA==","signatures":[{"sig":"MEUCIEEhmo6sr+0viOUnGGVgcEF+LMsVOnjJRkEpQn3gtgcFAiEAs2jh/uO0+OWHFVJle7kT6C8u50YxcAPBEc+akUyC3u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOwF/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTtQ//QM+OzsTau0RJrSkDPJGQvW95T4wO+ER/hvqU8wL49aJTUuyz\r\nAWnhhdabYRG5IyJb1FUln7G/FXe9POcGOQVGG7LIfJVRxwrFC24j0HcrqfPO\r\nv+hSZMM9dpJRataFoPjDdua/CHzTEE+ViUH77njX1T17/1CSUYymY21L8Q8q\r\nH027Gp8QXDTjR6/C/0h7tfs8Q/aZVLmhbRN5gMJlRpGml/PNTEySeQRnf02N\r\nB/KGgTtxapkEEFRkzwUqNC+5R5OVEzGpMrn5hQ0G05gbpJZFvp9QzEoDXV93\r\nkDSZgd9UkJCn7vbSf6mlZITKEjY+kfJL6KEB+/acvFIFndNEbe59vGRYHDA0\r\nOcqDOzWM7QE3yK5PCMrH3mnIrcRlug9MZxDSJzlBjquoaBV+LuGdrzdDdea0\r\neM5mc/+FfnfuyGxWFeVpbL9R6MKNrkj7g2s2XWhEmhZFrR2vvPK5j3NhGrCJ\r\n9EGMN1cvl6wAmeDjK85OPpE95igkWa1dP7HF5l2rNEL3m+5AH7hkmnMPZuCQ\r\nZwA3U+yG6iQftjWKeT5HkAjkShDkjv37buAK1uSZ2eAOplmUj7QrJyuE/yp7\r\npxNJbmUFDJr6Ws+PtVfwBoIIek8Zrw2PZvAPJbFN/MaajquNq6HAmGSoETLT\r\nvh0OJiHF7RQBo6yOPVEAmTOm6WMERCtINyY=\r\n=/Tw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"78523a3a47fae314441b0f6592f46831ae810f1b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.4_1648034175412_0.38565100345899883","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.5":{"name":"vue-slicezone","version":"0.1.5-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"cb355a846e4bc21751460f5edfee7b351046a718","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.5.tgz","fileCount":11,"integrity":"sha512-ypKwmiDl6/WCIFQb9X8fORlWv/tp2iIYJkC3SqbNu9/GybbseUu9ATZTFbUoZ8VKCKREBvR6FqE3qDP9OZDlJg==","signatures":[{"sig":"MEUCIQCOJ/wlhvnCc5G+ThXIzAqyvvTppkMNQhXXgL9eebInIwIgANepXKEOx2TQJzCBHtWNZVGbXuubHo9IvUmxmPbbfQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPZyyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN7w/+JOykyoo3tN+GUtdh17Md7gaBtPcbicgahFpFGBhSIEu6Y9n0\r\nXWL0tw9+bF5PpFpd4t7RYM7G9xYmfCrIM65uK8zQIJyrY+hmYW43096MFr6Q\r\n9HMkmsySdO8JZ1/zg5rERFsyT9E9VJBV5uaBQb/WVqcgjd25b8tlV/jHKfKW\r\n9poQlkJoDeNhv+i9rkuJkbTbsNCtIHH3IOR2+f8vdAbyqvkbozMHwodrjFBR\r\nMa1lPAVqVcm+qE5jMT5jwQPIjmDK7XTk+epemQZpwuwnZPT6beMl0n93Jstl\r\nwsFdqCKQm9OTtLq4ZjQb+w3llF+Y/o04hZI/3CktfupWzlTxXl+WOPA1QLCr\r\nwwmok3a9y0nk/Vq44WQue/ACMYmAh71sB/BUFu8ync4fBzQFQgk5KkvOKxJV\r\n96a+1Z+SqNIGzjxwyLpxWn6GRGRJjsZlIH5ovDn2uGrberUEt9S5LFJkiV+l\r\nlk+GIOH3qTsNEUl7fYsW/nONvcCPdcqa7RO88PvWNQIsQr5xvL8TTndIylyg\r\nmdZgx2F50exRv5Hw/1ajzJ1xaTlDWaiPko5ZgglO/8BJ7MlxqtVX2bslFM9j\r\nxnhq91neV8HyEOYMk7tTgQZJDe4Kcy6hDc+Av8FvfelBW8nCVHNSA0Wuunvr\r\ndtPWTwRYMNQ3FNzJxyKNXKVFumXkMCOPHII=\r\n=a2hY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"9845918ece6aacf3edcd52cc7f0c9c45009b037a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.5_1648204978014_0.8286115425490073","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.6":{"name":"vue-slicezone","version":"0.1.5-alpha.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.6","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"01f9310301a967b49118482299941c56d3b7a4a2","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.6.tgz","fileCount":11,"integrity":"sha512-b4YTM0NIJ3c4DWh/35/1iaAQWIkmatHyOOuC681nLfuq/GyTTHP6K923pHy/CHYtBeVJdU8QlOtHH+qw7w5ZIg==","signatures":[{"sig":"MEQCIBH+i8Hrmsb0oZNB8NdpT3x+VrZu1MNWhTEwdTjcMSWXAiAfiIVO6GeLzkSTML5o16Kh6o3ZKSH4Sl5v4NN9OEw8gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPcXvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrElhAAgX8R8I3t2WzhFUJTEk84TxPQG0u1qpPP5Z8TMhT5DMx4VVph\r\nNA5kFglUdnHvsb20WhiG94xbJ6WAxoJt8JMek+/B5+CfgHEwcp+2vt5RvCMh\r\nsyYaFBvDmw3k3mZjzjzAfEeICDAYwVlpBCYYwYwS5i553ur5LL5Itq6F974n\r\nhNhoKlcmLXXI5lTpHlSCOdlVHWfSs1c1g0nl6z/gcRdcOD53EipoAzwxF5/T\r\nueEcxdQBXQIJooG0XVW02DGlwlu1PzFzRmAwRh0VyHCHa4Frho2ubZtKaPBG\r\nTUvYrMrb5XjMZOn3xDFJynrTeJYGcq+KRqRuMld7+g4tv1xQCFYoJ8JpGodv\r\neAHERBzYWhcoyrRsTJ67G4RnCB0VeKLL/sO5N+YQLv9GfExex4Gr+k5hbsHq\r\nNIUn/bOECqy7mbnM6rm5gIiQ2QUuDLAEatfMsoF4FYqLpVkLZT9PNKhcGx7n\r\nOLb4t8SZcXikKiXkXuU97e3JWpOs3NILPm4uitDA3lMjO9ge9QLvod7VXK3+\r\nLljXoYdLFTvZfT6QwDqI2lwa5LbgRn6W5CycBgIV9oC62ca38ae3ZilxbQWQ\r\n166ria2iCogYA8OifjXqxV6ggNt18jC2EZTsNCitefrW1kNSXVxeSXpCP0iC\r\nvFLJTA5ue5dm6CS1F1uI3laEsAoyiC+o5Rw=\r\n=vg/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"93a3ccfc00726a87c35a3316b1e0dcae5e9e825b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.6_1648215535755_0.6233269467592164","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.7":{"name":"vue-slicezone","version":"0.1.5-alpha.7","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.7","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"715b885bac5927d309bebc1183f08cd5f2811598","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.7.tgz","fileCount":11,"integrity":"sha512-JW3ue4VZt4LfFgGRxz5SK1TnkuVfPH2WsoGc19M0D1ELk2ra8fZBNxScRiTJAmAnJqDTeTaNuLaCIWqBIihA4Q==","signatures":[{"sig":"MEQCIA1eCdxOGszyp1N2sFJNNP6YM4icYd7GxEIba1HI8a9ZAiB4eI9WH25zU1kvxePpWW3UyTbATP+c1geLSz5Tg/JSpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPeuAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlrQ/+KVs+8N/Ng+8rEKLTSIAtRtG6nMh5RH9vz45VD8MIUZng93IQ\r\n3DVERFOs1nmeOM4ic1R29dHLmNB5bPMtxlehrnCe3SN4pzTeHsGnd6WVY+GO\r\nxKYE4094R5kj0c7/ILmCKAZPaukElfJ74HYWPZ/Msv1bVmfKhUqLN5O/wQ0H\r\nCx+ADy63razSdZl3el2YyucHUq+Eub6wR5cEbMDiRA28bFvzrHe9NRBMbJ/r\r\nnP2GUcwEajNYw7HfT3d1xx0WpcuYowvJ1jnHqteE5oHdD46r9l57vw/Z9WGf\r\nII9jtRJ55ZEnE5p8Q73KJ1fSkbypfmVwNWBSwI0WyoPNBOQs4+fSbaFB/oyd\r\nVUD92m2fG4piqhxydGesV3MSftUKHVcLliUL6Yt12o/CX6uC6dGlsmtygpD8\r\nSuGPITYmbvz8IeqJsqeDd7KP4qG4cVt2BTT085CuZtrGwS0IZ+Usy8nGh5jt\r\nMsIMvq2kLH92QbZnvQW07EcvhfTigSv6QWVcynQArnnnCjfP/aDxhZlCG9zG\r\ntV+J701y/TaB4MnqcRCUQKusyPH7Gw+SVga/vHWpVxJQS0GzNfPCCXzMmhhw\r\n6yE5dEUUE2CPtcY13BNZGh/4NwP/mEAxf5wulA6Q+r4yHfz15UG3y3NAiXet\r\n5xcsC1Hcz5D7pCofCJJwxy7713fJWa0uNjg=\r\n=CENj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"25dc7d5d05e8f56d5edd971b25a93b2afad7b765","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.7_1648225152170_0.08159642260810962","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.9":{"name":"vue-slicezone","version":"0.1.5-alpha.9","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.9","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"4294fc965034a9925bfac053fb87c45ad1b08acd","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.9.tgz","fileCount":11,"integrity":"sha512-oUEaAMeLRiDVOmUmnyHnHfemtKvjq+n4vyg0S9i/Q9tC0rR76/Z2bPcqtMXmxdVprpHtDiWZC4NdOfsGIoa03w==","signatures":[{"sig":"MEQCIG3WVhegX2A23m8LgOD9BHJi6yPEj97zVUv/eyUJVgiBAiAx7o59ecK4WdFrqDF6mWzfpaliJpJ7fk6VVs8ckQ7tmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQxb+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsNxAAjZsUCSAzsUrb0gcVJlHJCPZpnC6LVUki4V3xWNj4hptzAstr\r\n/VjAMeFG7167q18Xw8FQv1BLx6YlxZIs4sSoVUTRVuWArhpbIouIPA1wzAQ2\r\nqqpp3HptcFoHs2cliScogbP2+Cnzt0AaEbS8j3cSSwRODhgsGYKEu8vET8wD\r\n8nOHbP1swku7Rrge7/hGkKCCKH6skyzWVabtg6CeRqGLb8ClAyYvKC2AYBFo\r\n3txhBBM3WALVm6lsPuEPsym520GPSZYc/Qei5Fx6UiIyp+C+sTpalbgJOACa\r\nhPK/1+afbKC6uzEhDOTh5FOQsDuaT1Btx/tWh+GwTQgFt2BGcBxleqtytD+f\r\n7b3IcH5mKuuPA9dCeR8apnGIbAa9nDRhF0uMPq6DivXhNt3WZUjo3rbgAo7z\r\nFk2K64TqRQnLYM40WOGXwZi/+01BF0u0mjx4j6sdGDWnsUSQaIaJDcUR/q1b\r\nbMyneMl/ecCb0GnkMbgX2PFJwQfNYHAajJpV5Ul2qF+FKRRz3/05OF91Mt+D\r\nQR/UZqhP4IMXGBibIu+3ggalX9Dy+Fr7lhZQdvUJLr/rwFwKG9ipmjjCRCPF\r\n50Agw+Fm/UhasvTGnz+33gz0r/CZiCevpFxy1mx0mAThnEd3fCYmj/+N2uFW\r\nfydEBHjCa6+G7BCwB6yFtETLSS9dTOWGXec=\r\n=Ts1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"25b1690702b8be726a38de0b96bc26d1b30295cc","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.9_1648563965882_0.6008110254048371","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.10":{"name":"vue-slicezone","version":"0.1.5-alpha.10","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.10","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"bb3218f8d9b6728cd86f9428cd562e5b54d43330","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.10.tgz","fileCount":11,"integrity":"sha512-NKuk7L1nCzSe/CBRUTRrv7ghzc3PMXyecVhtr2ZWgeuKZu5JBJb63mj+ONR0jdYATMYt29Ixn7wIcEA+ZllD7w==","signatures":[{"sig":"MEUCIQDtZq8fWIMMc5ij/8j0JTKoXgLCXak91PSSO69gRiu1JAIgL/UgALMKHQyanZqksMK92NJO84ngyiJMfTP7SKKwD5A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQyS0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolKw/+LvdrsdQRXK3zjp3TFzuK/4LnnSowKZONEpYO8WoZ7qx3RI/y\r\nrMmHowdgCgFANppJ8/yx/+cibOZCaN0P8pjYak97qNuRXChHrgTu6dwOABul\r\n5oMkFMBRW1SWMCf0H/VroqL5vEa7iXXXQgcMG5dPbyvc2VM+XM4HjAaE5g4+\r\n0SSutYD2nc0ecvT6mC5ia/gboT+7O3eg4BSK82Ld85XQY0X0ZltJ8lkS52zV\r\n96CbzMWG0oDIWAYg8i3xq2TI4vaqk5yvVT5cWXtaXjpcfJZFreK47icbw/Wr\r\nJihlQUqWYtO5AnKLwzTflRU21h0biBXM2MJXgLNjjgA01kovmVbPXx8q9dVm\r\nBm5Nrc96r4HXqKcjZjx97xAZHgUCPi2V3pMnTqd8fNFXrlL6QPuz0z86DbdG\r\n4Cjgmog83ofuM4dRf0lLL3pzDQHoJFNkx555IUGjq7utaYNZmE248RLO4P0k\r\nvCfl/S4ldFZLsBQJDdIT1MSu/GiHL0XDbrVNSF33uol8mdTpUwtQ1SbF8ttX\r\nnU4RwjT91Ma6PdpfiZD1nsrrsWwPjJx11ekE/Zs+jc0oLZVtjY83BuYPdU7Z\r\n4E81O1aSs2SIRWI1vk6p+6Dtg91W0CBy9dqNt9QpOi9wbeHcp/Ilz3vxDfHj\r\nBRTTMMl6sVJZL+5FFIAw7jh3KjgTPd2OvP8=\r\n=IDlm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"c5ba4fd9ddb3a902191248f16b1d53410eea883a","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.10_1648567475982_0.10143063460126367","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.11":{"name":"vue-slicezone","version":"0.1.5-alpha.11","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.11","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"f586fe899e9343ee3681be335ed3f0ff74f07d00","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.11.tgz","fileCount":11,"integrity":"sha512-0jYpiEiWyabjPve8gwQ7uxOIgh5NAJ2JhzCOgYvXNjMY14hACW2XGyi2KJDdvNL3IF2PUP4IBNcn5PWFSJvKWg==","signatures":[{"sig":"MEYCIQDF/8iAlrB+eZD5JZBNxVaI+f8j0Stgh00ZdprK5NfgzwIhAMAZzBtAROlqUUkwwEvBsrvqM/fWYkHWTZ9ZwS1wA2ZU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRCI2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcehAAhZxpasYj16Z8nk/P6FNYmHGpofKhaujpRrOrVRwSHlBtO0Vn\r\nZESE43uj3RC7rK3qwI/0LPddGifc6kqeKwt3f2mlGXYzG7g8HuabcrFqLnKf\r\nlLUQGqS/sQUsnV1TS8zTB3UPmEHSpm6bhSWLjxcWa2SIrAqpMN7zYiLZvb/t\r\nUSlQmCI3QVHY6+iU1w1g+BZ7EdjVz29ic4rVH9m+HwhDQV+cIzLCsBU73gae\r\n2ZuwcPlvz4DjjjvJGlocqw5B5R5wnzg4N9G2yBubpMM3OJVoexG/JC9mv0Lz\r\n4MVSZ9KxpB04IGEfzbkwt7OIfxHXnPonYISgkav/djxCohQKQsCa2LTWbLI1\r\naYWcTLRH4JSTG1b6k+yS+kNJlqR5rTyazoXZyvxYeKvQswMjzJL5bM/pNcXZ\r\naqai9mcbAInocdLlIghiAsRMfWPfN8stvFqOGdr0T2Pn11bIlY/p5gtIR9vN\r\nfSy9B+vtwfuM4qULjHJCeaxYyL58FX72vJNJbT1XzFq0V+Wci016EC21Ynpk\r\n5ZQldr3zZs8Kv3NlcpAEkSvCuU8SKfMgVjmWOqJ2zcvGhyl/u9qB08++ahhM\r\n5WglMHj9gbMD20bfGWwXAcnTfVugvJDD5xA1UCp0Ir9AJesyzZrBHuNysWrn\r\nzK7NfDus+vv1iGNwHmcM2pr4FEkLhDe+O5A=\r\n=sZbG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"ea9df274d7c9ecf265d2c0de33e42913eacf8718","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.11_1648632374405_0.6481075329143233","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5-alpha.12":{"name":"vue-slicezone","version":"0.1.5-alpha.12","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5-alpha.12","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"8d659477348a19a1736b69e15f80aff4ca46d37f","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5-alpha.12.tgz","fileCount":11,"integrity":"sha512-/Rs26vAPJ7L5i+Vn+iSufCTjYPg/DeQXhxa12dZVIo0Io9xCPxsG63DzmVag5ZgdOrrT6e1x3U5ySfBG2FCVKA==","signatures":[{"sig":"MEQCIA0+KnLgTRlscnxGfBw46hu1LsovJfaCDkFH+jU4SJ+jAiA/6ZoKitY/2UqtK4UwfQovhdlcCzfXyOsrftgyxPfrJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRClXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0+RAApGo1J/MtQ2ReXKE+FyzY64B9M2xYD55iyNAtq0dwuvDnm08F\r\nxP+o0wKscjaZrROBb6WLRIFtwjIlxgGcEC9rs/PzI676dNeiJWgiC8cBoPxN\r\nbuDyBIEMisRaoKlFHWPpLOJ/fTlf1F+YJUFubuxXWXkkGEYfq8bOacC5P9rz\r\nqqH9aefLStu8JqTFx9qHVmdX5pFRx0I+/fJeqvswIECUaPDjplzHp6naA+hg\r\nR5uZ8FfTVH/XBtxImbEH9FTmLFf5nXh0AeVvy+GIb/vNRm13ZJx7P1zeLMjp\r\noTAuirq2c+RpOvHC6zhERDS1bCpuzNT9B50OVTh6JHB98TNg6ZTTJYZ+BsZj\r\np1RDr9Y+BOyWNWnQ/47y37KP0ANs5azbOg0dqpjWjf0ghKE8tZIlaqB1nNGS\r\nd5y5IZKa35VruXYQiUBmC1ZPILKvEAzhVdtsK8R92KzivacLSNiHGCG8CaNm\r\nt+SKfUOW4AgHxYohW/d+89tiEzmVdvCf11t2OKuCbWW+FwmjSuXRYEYuwpit\r\nNKz4DQnikrvJp5SNIOEu1LFjjPxl1Q7dje57+KqouHr3AZcnDfVmoEkkPSrR\r\n8rclIYiTgRtTbPf524v/dBD9fOlUYSVVV/ry9xURzZc3aDZLkaZlwhK7wMj8\r\nrpWWAJLg4nU/Q4Z65PKVEyrBXD+q9fktK88=\r\n=hg6f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"1839151e41d7dd57d764a34e562eba3120ad0063","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.5-alpha.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5-alpha.12_1648634199541_0.7458276755075297","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.5":{"name":"vue-slicezone","version":"0.1.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"miniploum","email":"kevin.jean@prismic.io"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"509d2f0adca63abe23a805083646267f2358c1c3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.5.tgz","fileCount":11,"integrity":"sha512-QGnOFHHe4PPSSC4atYJDeYDG0eK60ne6ohzSspwWCRrcZrBPksuELzlOVeerVomYgExuuNCgbRyaXhmDgLO1+w==","signatures":[{"sig":"MEYCIQC2XFV15TK6RbbXJX1XVaAQtquHDBDSIbcJpdc+jknvVAIhAOl0zPDjTOZFlAEWiKFVEhAwftUxsh7CerxUAYULQs/4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRGLrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNJA/+Ldvb7BkjwQ/m5bzT69x+P4r+rDoz7EpU0ipiJW878z9a0p0a\r\nh9SpXopzVI1ssdiUL46GbKeopkygxpcPVCmZtkLs6IyNeFUPtaXoW0DtD6q+\r\n9bSTKT7lZHyqabWKzrLN6NO65IOHDdiDYnYNScPUVZNde6rZ7ARC7mPXcv8H\r\nWaqUocCMnQtF3bibx7xm18zeTQA7vAwGc2eLXul8nqhEsfFBprV4HhYFB6zD\r\n16udJBVyxGbRa/0xc+AMPuxrCQCyI+IwOPzOsTBWD9M+jvZ6tl494IiUG7vd\r\nGM2eHOyop9pl5G2ovDkL5A4TN5F7BueHc7YVrqZOa2ufOd+K0ni+8L+PFjwr\r\nFWMxRRYNRJBpp7Y5uy+GZn0Acpyt8asF6VokyEUZfbCH3wTUj+WOS5VkSxQU\r\nHGPNRI0uImFazWOdw/NtGbpZfxOBrq4FuX1J+M14PIih9zciCeZNxh2gwe4S\r\nsnoWMmJk0jDLyK8DOywWWBCDN8P5EAybXuKKElqbU7s/N9mxGVPCqp+MciVa\r\nlD/j1skYm3Ndnulidr2v+N8mTQJC9KlRaq8OEZ7SHpwfAlu11HanDMc3TUtG\r\nm50HwM2o/zEm8rTPFaDaqmG3NRUqSFpcAlhzLXk2z1HQ2yZLn8XKes2cofyz\r\nQE8QUScaZaN6966h7GUSwVi5KNiESuQD5Jk=\r\n=7B7n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"f456b9e02f090cb3ab66eca61252ac6e0e335678","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v17.3.0+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"17.3.0","dependencies":{"sm-commons":"0.1.5"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.5_1648648939741_0.03339163104005638","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.0":{"name":"vue-slicezone","version":"0.1.6-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"de7d26264968671f5e523b3f998e1c12b2dbdffc","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.0.tgz","fileCount":11,"integrity":"sha512-BqxuQPskwbYMr0Fat3V/Jsl/da7s836p6psnpmvM41rqWGiZ+jrhI73FbrnKZ9j9v3IDwXmi2BOR+z8ioM5dhA==","signatures":[{"sig":"MEYCIQDrzUqSGmX6HK/cGiT3q5CPI1cAIIsyAY1/wu5/8tQa1AIhAMUWtw9lfGc9+Wifozvgj7AHJ/5tTIF+lzzGHyGIsuht","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRtrgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMwhAAhEFAwOfmhj/ZOEKRe/vdv1/NkhQTe0s8BMpChtLOhHns+HGU\r\nFNnKZE8DP0F+l5TdJNDZF+dFGZGdfl88/kqaPj/XMFtRD79QOCzWEQKNNU2i\r\nD6GgE/1wC66tRc54X4akSHyPH4HQG9avk6/xtQBykwEB3Qh3K5UoLY8SvysX\r\nP0Q5m9EdC8RlzYNa76sOJn4vXBJk65Le2PZX3MOdAt6FSVkBMcZpS0gU1IFl\r\nMFypFNrg7AHxwv98OpkfuTeaPpSOYaZN9kJjOyhOHJ94HB8v64OyHZn4IMVC\r\n/9hgI9mWGVRhpc7ta3jU4QWhETR9f9KpdRhQRyhfWGmZCV1UifYQBj4R5jzV\r\nldRQe2jniSYBptDoLe83kcdGcB7Y2SZ/jqwN0lxtbvkU3Qv15jH8w47iydMA\r\nJAfYAhppW4Raxx/6idGYScWUyGF7aPUCXkJSHyhMN5NsjbBVc12ZjirYYbG1\r\nLD8Omq3T7ED8sMrAzVRWC+dy3Tm07+wVOuZ3KdMo5cGYb11dTeI3ZGTaL92/\r\nIhyAjNg+RsV0+epG6K25ckHFb452J9vrP3EF0Ko7xhByOCmkzJt6yNMaqbpB\r\nV9lZRxSckO4Z4S/wCV6izmuc86qFz7My6XevuINw83k59DE218ZBB/4DaC47\r\nY59aptDad9tAOlqYemg81EJVFGit3YdGNOY=\r\n=p79P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"6868d8994a5705f20ae3fe2389eaad10f4108b33","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.0+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.0","dependencies":{"sm-commons":"0.1.6-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.0_1648810720559_0.1783339304958369","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.1":{"name":"vue-slicezone","version":"0.1.6-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"39cfb7d51ac56294f534033f41eb541ac11cb305","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.1.tgz","fileCount":11,"integrity":"sha512-MoJcc82kBfEcB1mpBFYOyZ0MJBtKyL6rx8gaoiP1jNH/ZDd6vKtPZo+ZE4Wmm8dLjKQlYQp1JGVE1iZ+OjIf3A==","signatures":[{"sig":"MEQCIAlPHxpG9+dQb0o5bQ2wwAI3OU8HG4TCtlJLbTCkmuZ4AiBpa3XF3QMf5V0AlmzAXspuoizB1fKf9ZrpbmT4mPWeJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTEBMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxGQ//aO65PW/w0j+SGABcjZDHbm26n3fXCYIey8VYG5Ylmf7gjJfP\r\nXevA3ikWMz86k6Bc7+du3WuEbvQzfrh1eniCrTRyav279ydztmI3G2rLeOxD\r\nWlyOx/ovJ+aN3PF/DOJn++xNqnBiGSnWH1hhwaC39n3iImfnse3dHJ6lmFBZ\r\nPrrlkAkYqP+P54MxuXXSHWSSed0TRunJecA/C2R4OKUi2SzmiILvfLzvRAJu\r\nRbMBx8YJvqsqiNp7p0aGxJ/BxjPFvah6qWnSmMb5G838dCUmIa31FAPPPs/4\r\n8XoFArUYXc/H0UL+x4FFbxB+xpd0nScB0ZU6bwOCiRg0N8NZXxpXbs2I/2h6\r\nEzcYnWm1gOW8LTXMa4a6f2iENL4IafWfnUOnox6YynHO/lYN4ccrUDDeLVJV\r\nYmzeOwwaOfLtzUC+7wBc9+usH1S5hEYnHgClrsD1tXTwGgGBDdLk3+os06by\r\nTrnZIcqBoiu7F9HMU81cJG9f2mwPhwB8li7NhKpdc29+WxCwOEQ3v5f+6SHQ\r\ne6yv5NmOpYuJEmgdaldn2CHPRMMmbXohCxv87pruUYB0LSaRVqD0slVD4Vx8\r\nzWG+ZJ+nz8/MeR5gicc6dFvCU4cyMgIRxFT2EJYY0QmD5QOtYyJhXMTl+ffe\r\nemI2nJ5BJuW0sk6CEVcLX/voDvPfSIGmlqA=\r\n=Aqpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"de8667ad686ec34a087a39b29aae4f60d5651c44","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.6-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.1_1649164364806_0.0609675436188144","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.2":{"name":"vue-slicezone","version":"0.1.6-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"28b74314f3d748ca8853ab18c95ca28fc6433107","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.2.tgz","fileCount":11,"integrity":"sha512-JaN+oDJN2v7SLEvkElLiS7b5Tlb/ecf8OBYuUFeH07xnbUmT2Sueo6H0H1Bvi28ADSde1GW+KaaS3emX7LeL0g==","signatures":[{"sig":"MEYCIQDahlqOJKbLuSBwtUdaio8O0WqxVTMtuBF8z+h93WiOvAIhAJFNCD0CfauaukRDMdaQGBtbYB34gcHI0Lzg246tzvh4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTdIxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqe4w//bkD5FtSmokHvNaoztJgAKEXkXuF3NFP61sHgqACVWt6SX76M\r\nQUjcD8nkxIos0gXPmvsK5nYO0X8Ylwuqhu/25ZY9atkCGIysBuneylddyMe7\r\nSg25nHPdNCVc943FL4MbRkVmqYdnyDKjaXj6m0t9FSJQOgVzpJbLePILBiDj\r\nDMVlh9C0w3i/KIwkz0yrcEynSvhqYuQUH2ZwG3j+q6qIZDfp7Vh5exZP9AiL\r\nP2M3kgplF/GCoFyT/254Q1hj7tGLXitSBOXtPTgOX1ngX9629rO3OA5SiGI/\r\ncEZefA/qt5a5HbgZamjrsFwglbXherlDCNkY4LjJLQE2j+hHSgozFpJmIuzY\r\nbbdkOFonNS+zr57abzqaDr0PNJcVmMK3zbS6c8AIOuNDw/0YfaY/zY1A2+y5\r\nHXLTQQwzeoc8CiR7fGMiRA8r4VuZCRKFmA32fkpuDZT76WPeOK4i+laJ7Q49\r\nP0gv/ZuZErqSAaBGx76CuRoZGfiC2r31Hu1VpXXp5WofX1/K6z8eLowlDZlM\r\nZohql390jlRwiqmfvh6Fk+/Ec6ymvzz8exurzhUblpRZlGrzAzThKfcW/P+I\r\nr3qM23G/ZVV4shdjgv34xpJBOqyfyfN5w6rOrV40IM69WO4RJZNFbkwmZqy5\r\nwJGTdkZOFqucfNpqN630NfhWyOaBnygXc8k=\r\n=QcSb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"1b392737172ad581d00ea84c23b453fb0d166a51","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.6-alpha.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.2_1649267248955_0.6790249198017588","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.3":{"name":"vue-slicezone","version":"0.1.6-alpha.3","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.3","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"aafab914e1390a391c0e1970c911d3d062b6b9c6","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.3.tgz","fileCount":11,"integrity":"sha512-Cbwx+Wv9Ify2AZTGEc+HVumLipTPDRSiAa3gDcD+9tzgTF5IKet5ciVlor9uz/hxc3lUM2KyG8SALguHcQ3jkw==","signatures":[{"sig":"MEYCIQDGxWQXsJUrFX0bqZqz/9gxiRyUhOhB4NREGeS4HNH5swIhAOkKMuVQ7TuMQKPYyAFj/+S6iVzocGZ+g/IAvfLrMe5r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTqTRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMQA/+IyocF71wE4DjBAQ3cIgxr65YqSwPAOG3tSvng1z4gl+FEZEx\r\nRQrR2YT7xUTmKZTnFHFQ9MoTBPVLoIWFAFJcRw51N7hoDiX77dlKC2yan0Gk\r\nco/qCR4sjln9gDCpcYYhKdVcoPA9Us4qpqC6RrWk2Ueaxkbtp1Q1DzjO7VDp\r\npwkuRNAAx7O8rNt3Am/re4NE12CrILubrv67M5/UbThpax9JVfXipgBVntT8\r\n6F46emXLxFYB7WO02w+Unwh2+shOUEApEkOtSc8aY8qewCZNlEVGHR8gfhc0\r\nx8dRXK8M7OnT9I4L8GJjJRMumlnV4DyyWxx2VwFZNpyBN0MlXyasJD4ujKti\r\nEpyN9JioonX10HGAS0v8OL+5OrLlpbpIXRaU/hYYDmNtMC9Sh/P3Xxmel5+n\r\nxdCeZDCawmaPNv5Hill7uHlpdPdoX5iIFh12P2j8g6S8AOpyiglcU29GefhH\r\nYQvafVt8bOKlrpp/GBrmj7LhuEfu4vyyMCL/cnkbRDsnnnNsK/vQGXGisAgV\r\nzsLGfKKu4t099xWJ9Dvmm5rOQ1dYkjNrer7KGf3a6Nz1rQHz8aLewUoeLaak\r\n98kFFgeue5+k3RAQ64Jy351hzQrKQ+qnDhg4FuDi5ao8yGUjF7s7x5bA4C9N\r\nHrWps2P51axozswxULd4/Tyd0RmSsdMdd3Q=\r\n=kfVn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"a3204d4802df67b73fa0f242581b4c3a9cc14937","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.6-alpha.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.3_1649321169522_0.1584207502702888","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.4":{"name":"vue-slicezone","version":"0.1.6-alpha.4","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.4","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"138def6a03455bb30b6b17eefab2adf11afb41de","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.4.tgz","fileCount":11,"integrity":"sha512-0MCCWlRBv/6FZ+kD6GygQnElm0EDgh/80+Ua6ojuBhHi3F7I1+6WRaO18hFnpl2eeqSE/53N5m9wYPti3vn8CQ==","signatures":[{"sig":"MEYCIQC1cYziZOLZ+7BvIjD42mRo8tVyhhelDqloFbqViavCZgIhAMmzif51F+6OIjpGJMA6D0gu1qPPQuMNyXUqoP3sqNQ3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT/kCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpagg/9GOTu7pvJpH+KSmmDtF7C2w91/q+7DgLxSkeDIj+bguc3gxeK\r\n5B9TzqR5nxdpHezVXED6Sdmwo4xemXKV6XU+x8EMJVG8ttDdBvpze0hMy2F4\r\n715S/UGZQpGX/YD/mYRuV2PcDUsxHFfUQnpPjrv2SA04RQlKw4kC+TG2z8iK\r\nvBDKfWoUZYTEtS+Nv4g9dhdly3xA21SWB7zsw/kUYPPEOnX6YCeGMUKIxzyv\r\nLB6E6dB6S+a+wPDL3zEqEtPNgew/Y4i6Ohbp+XQy0CEjXFyiC19/fULEi4es\r\niVYXuYV2a4GPu9H5NQhCH9OSo9/2jmSUfqhDsPKBfW9tGRN+Q4ODNASEGD7a\r\nOVpoWA8jqM5fM8xbMv2HYVSxzVzO4cqQZhhor6/r6ze8aj3M7HS/W7pbwzq3\r\nEhKvkwLhp7S5nNWSj8Ub/BhlstW2U1ZMHIQ4JGRgBk4k6semRxUAojfC6lRE\r\n84EdQPuSNL+4NrqKj23YCLphmWVhmRaiEcR7Y5FaT82n6BThVpiCmMzhB2aV\r\n5XlPvUhwKwIhos6PURqDnSu4tf0bXYSbpcs3i9yhFqnoAZsE6zxQMYQtMKfL\r\nibgftLzW3lc9lyRw7rwsOStbUEI2Ac3xJuXmRjJV9PXGQtx8lYpLeJyvCnn8\r\n6JffWfLmKIWdSs240q04+ckWCffh0yyJ280=\r\n=WUA2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0354b8b163e192c218479eedc158ecad06d366b0","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.6-alpha.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.4_1649408258469_0.20969907611842187","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6-alpha.5":{"name":"vue-slicezone","version":"0.1.6-alpha.5","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6-alpha.5","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"d7d1e4fdd12faf853d1a498f31bfa2ce3f2c42ab","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6-alpha.5.tgz","fileCount":11,"integrity":"sha512-im8FYpKf+Ett4H5GOiMf+UXbAYj46GTCjvZl7i7N18zvf/OmS3iWWMNitMvl9BbfHSSJk4ZRmgTzPWsP4bQrMA==","signatures":[{"sig":"MEYCIQCYroZ8GRN3dTATfqOUtsIO6MOtHxgfxvwUalQ48tzAkAIhAOy6GiJvZhM+ivBG0bG/W+cvIGzKk3JCEAyDIzVgSKov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUABIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2+A/+N3lROnftldhFzdIh57xlXFN5wWR+lPIZsfnb/Vq5WiXq8iKi\r\ngf6nJatRmpv9l1GoaotuofBgyJukDkDj6g5zg7/AyA/aIfgOm4HYJb1ewh0q\r\nYlJGtxoE75BdS7mmGaiw/ZjWRlN1kq74DHRkLZ1j9jqufqSyjGXAec2lXfus\r\nHmpaZfhTzWLo0XYl8eIoXcijj7t0Lp3DJJE3PWpd79mgpTQFAopIsrp1kaQ7\r\nopHN3p+9cGbyd+JgJy3J8cJTNt1dcmOMy4SPiGIvi/XzX6FI3+a+XHM2dE4q\r\n6Hc2WYX7h643OMQgrPRkKgujpw52Vo1BU88wilmNW+etHyZlRcyPrQB2Fdev\r\nb3+J+Bu7DPMoXqrlbZy/Z6p70dLSVb5w2UdHasgcBCiK3SmblaXudZOd8jWV\r\nmcB7Q/w5z0YNoHFkz4O0OBlUhAbSTjU5Y40S6j8kmXkco8iD3bCr/2lQYpFe\r\nZhawciVRNe8NAooI2lUS7YdjN6x3uxF/YJFWFJES87nr7DC2R0ZAS8HGpaMy\r\n6G/dQhfOzKhOq7OvPyO1ygGQlS8p0LIlmZ3hKFGhCZYuULa4vNz8QfSfr/2Q\r\n4Rp6dbxw0F4+bI54lCj98A+b7EHYY9A7t/pQ+cSmZCcAqGVJxeOXTYL0sAka\r\n8Yh/8Xc2Wprwvb52cE4LwCQT90aOgacFO0E=\r\n=90kG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"0de9890ad1d61f028f63b42fbc293276773c94e5","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.6-alpha.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6-alpha.5_1649410120396_0.6397088400271522","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.6":{"name":"vue-slicezone","version":"0.1.6","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.6","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"6097c631af78a25568eeff609e5274ae35b1ff76","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.6.tgz","fileCount":11,"integrity":"sha512-awHxDrdSFg1cvM1NjvmBiFSF076B6kooiUfYvhxr3Ua/yXNFtVJCkfnUJpIHwkGgRXgx5JbObKoqVMiD26Xn8A==","signatures":[{"sig":"MEUCIEgvQmV7Tdl0dsFF9TtQydNL/W1EAoJKorVuIbt7CA1FAiEAv2NclWavowC6BJ12ikalodWKFUMpl7sfUlRKqZ9SfWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUDjhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmIA/8CiQZntezyTugMIzn+YGns5T5PpZ/xb1akas/ENRDj9C2GWYR\r\nHpCij9PbYlHlVtRfLQEvk2GYu1qrlZILUumq+2kETy089ll2iGpoGTKXtEfJ\r\n4gcVTPCG9Qr0T9zxBVQWJyD83/fzu8ZElSPKAWfObCfOvJE0yV8mz0fSCKqN\r\nA+YWOxfqIoAsrFOFrAPRyf7Ixm2tz1UBiLFbEW1EzYYBkadKED92CCweZTaD\r\nh7Bcro0zlzSaaWfP+BMFJhFWS7/ZVvBb/89AtXm0FeHTthArZrIFQZRdWYWl\r\nBChKNM1P7kiu48pcEGjvofcAspMPd/ubSgWWCOKGiGjCE7g1cgQnUn6Zo2ca\r\neMe+93lI4pciMxrOUfRi9sjgPYVkK+UuKpT05dd0XAKWa4NjA+emScgkiFRI\r\nzotPL8glJlFhKQpBwGCScuyNrXoXmzDJIPh+rFy6Vol5nbBVbA/WXn0ExS+i\r\nxN1Vq5EfDAy0aJslg83Rkzuo+0sAvfFviue94J+qJ8NFvyqDXxwAmj1TDuGf\r\npl4sB45WUxZAfHF2QaMsLBx/vLwFES/771rnaNa73/UoxKqAFzSxclVl9VdL\r\ntzGmNZx8eotV8pYGy9AAAil2eUe/SLg8KzCua+jvD+APygJJ7w01TzQmHdZv\r\nbrudKm+yY1p+ZWsiiBxMZ5s3o78vkCEVvcI=\r\n=knwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"ec6f9cd625377d9badfc3925c59edc66b58462bf","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.1+x64 (darwin)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.13.1","dependencies":{"sm-commons":"0.1.6"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.6_1649424609120_0.08281577190480505","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.7-alpha.0":{"name":"vue-slicezone","version":"0.1.7-alpha.0","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.7-alpha.0","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"56111496a8553854f8c2af7c8978f7d238346ced","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.7-alpha.0.tgz","fileCount":11,"integrity":"sha512-ocWzOoJBJw2JKQ9u9iuNEEt6/D++P0JTteLwx6/Rc0LMhWjduZffLA4ZcZ9VKyyevrtL1wCJBMv5eSAcOuXlDw==","signatures":[{"sig":"MEUCICBOns9cejzYk3wJW8z8D5TRhNQ54/AWl+iCVcXqL7C8AiEApWCNeFNeSxC87KKPH1ys+YT1bY4bdz2ASZtuXy0geSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiUEkbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorOw//QznvLCizWgFYpTGuRbJlbewg4/qCgEoDXPthHA2nYU0E/q7d\r\nwLnySK+88xcESuS7PumZ19mjrS1URSmqQd9Jrkim8NRW+UTyRhVJDcK71gpW\r\nOIpfjF2/jhElzBj/REHQisxmKW8vH7zvcpQba7T6NC1auYTkECZl9KYNo2lY\r\nSzxBc8QwLr3Ucma6z1uKxYWZwjvm8q1qZ4/inkyFlCqgSfjlX2e8smZ2qlS5\r\nTxk/CIDUPktpazxe4n0DCvoYQrEW3cZcQo6eXKeKZmqzSnNH9WVlM4TjFVAB\r\n3S4losrTKq/Dp9Ai9v9CNti+ly+bys4taNBzZ43un6wB0KJZA5WRr6qVG4tg\r\nvy8h9o1Us07PXtKW+T4G0X3J50Ei4GXR02hk6n+w6VggCE/lpNlK2X6jjXpA\r\noaJJxPVIHvyFZld6mBNy6Yy0V4OyT0rhD+CGunFLuBwmUJqs3uGz2YGdisVC\r\nx7+Bn6usTzl175gVlwTlamzmGscOCKd9IQ/Gx7u0JsiVwYsY3KxFvBWsy9T1\r\nfvb2QGRe9kxA/c7UphTOqcV9cZB+3KK898t4L898Q4dcm9WKgRgo8D6JIsbl\r\n/QAfHoHN7WzuPK7gfZpi9ttRNglHYgsP4rpuJS/3mUmkuCpcQHfRE8kulHto\r\nc6cVqkWusb6GbBo6Z3lMhhrqqjuaBRSLNAs=\r\n=6fBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"3346ffcfcfd9353d7f6465648fe6a5d52bcdaa3d","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.7-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.7-alpha.0_1649428763458_0.15594055342103608","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.7-alpha.1":{"name":"vue-slicezone","version":"0.1.7-alpha.1","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.7-alpha.1","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"de33aac732533639c36e8f807146d916cd83ecb3","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.7-alpha.1.tgz","fileCount":11,"integrity":"sha512-AaFVpr9D6qAy8z/7fzagJT4CXpwAF28Zil++218ubs41UYUNjxjqbKY12mBCNcE3Hy0O4kWD4I+zJN9u4Rg36w==","signatures":[{"sig":"MEUCIQDXvFSHOVdwMZleF+RwXi3X7aClXjyZFJ9D514MyjQhtwIgJS9xe22oabdIDKlmLALKpJxpIaeeE3wCudeWgIxhQkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVEV/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWmQ/8DFsJegLAg9agiYbtMMtd/tUJgiL+SF3l3uFQhag3efayMMXP\r\n2iuakbez+CoeczNJwL4Bqkfsj1omtVyoFA7ym98MJ8fh0zz/mFLJQ96Ck/GU\r\nsRh+nNIb8xtRLCSZrAdmnV8x7x3IVUwMPmW6Pjw9LsjwmX56FZ14PK0yZVpI\r\nDgAYDrUCnNcbWq0vujoVCUOFWyJRZlwJkyV0YRn4sHTsZjlGlr6yIyQvYE71\r\n3zggalNbk/P1W+HgaZKLXZXlyfRk9Op3QrKFmwFLUPnWYR5ifFz4w7u5zocA\r\nCpfdbLgewaW+WhyqjaqppRh/bf9pZID/fBNu+rc2AZ8z6bAmHpDKi3J2f3Nn\r\nLN8/+E1Dl1bRfuUO935WjuajIqnUXIKvGYY5ZJpdw1yuilObLFQ6mkmWgHAW\r\nODUbQyv7fAlvaGE2r97j/UosOzvmF1kXbhVv0hzlP50LFRJwYhZpSz+oIV/c\r\nJgyO56erlrx2l6zrTKBhxu88i06ewESxvGzpwyFZGASJfSMI7va0KFkKJIYF\r\ns9sjbcSnxKLO/67rm8QVCtdG43P6bwfhyBdNLG6DoFjDRNzzN1saF0UM9aJB\r\nj/IAueMEVX4VaL6dNZBHLrAqIDtY9l2kxdnkbbE3CKgf3PMtFhdAsteR6+0V\r\n7CnTl8GS8m1GS2e9AxMM7nfd884RgnAfKQ0=\r\n=9CpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"9833a6eb6f7503ca088aaa973c8685021c15ef9b","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.7-alpha.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.7-alpha.1_1649689983049_0.5104500373046104","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"},"0.1.7-alpha.2":{"name":"vue-slicezone","version":"0.1.7-alpha.2","keywords":["Vuejs","Prismic","slices"],"author":{"name":"Hugo Villain"},"license":"ISC","_id":"vue-slicezone@0.1.7-alpha.2","maintainers":[{"name":"sprite","email":"marcmcintosh1987@gmail.com"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"lihbr","email":"hello@lihbr.com"}],"homepage":"https://github.com/prismicio/sm-commons#readme","bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"dist":{"shasum":"2263355da4575fd377edc65e098250ed1e092702","tarball":"https://registry.npmjs.org/vue-slicezone/-/vue-slicezone-0.1.7-alpha.2.tgz","fileCount":11,"integrity":"sha512-ZCPTEGXf2nW9hRM8sq2tQc1IlRJT9DgdiYc6ctk8Cvjcy1Tw69g/8HTeBs4T6rtRc7srcyL3nC/U9DjKjfPLJA==","signatures":[{"sig":"MEUCIH9zDB2v8Et+rE03NXoxzy9UNtwxSdJLqZIaBMOJIj8iAiEA5C3GMPgIQLDoh9jdN7VylOcKbV2HfuZIm6NK0g3/f6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":22888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVW4yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI1Q//b0nVmxC9pF3d2zdVs2rfWwBUc7eTOYri9tWfszNCYTvw1ZGc\r\nTQ8QwB1bnb8o6RMY3ThPVuOFjyigwzJrgEUiYznQPL7v/hg1gG/SNamfsVd+\r\nWhE5YPTGAPScvjfo9/CaBLrel55z1jvMXmc1/2Nk5HM5vgAxJ1Fq+qaHQJ4Z\r\nfypJ5DJ0yNtEYLFKrElSEaYLNQDvihS3FwKyNE0qeMPb4PWY8gxLeuuarcef\r\n9sc0sRrzZh2ne3RQzT1xtJSZ/b0tgBqAz74RBBC9VEhJCZrYKLUo9l+DcG2m\r\nkTcp/ESUbIjO4FJn3zCbKqgwS9hfaQQo2R+Gmj1+rp2TTkekMIdxG3kFzsWi\r\n54ANtn1g0qwqkhvWgTewPD88UFh9ZgJvcKZxkr0U6GDb1uPt8frFeEvzplRR\r\nxws40QDWG8y++Wkct2k3RXKAWvGwJjjF/VSz87ezW60RKCWWatKj4thw2IBn\r\nOmgGIfgMXh4S/iEDm0DCCP/1r55bG6GTgESVPEtN4VDu2mWLhyxrg3jYQZXj\r\nhp+Z5wTzjBKZOKcI5wyVo58U2ufrZEkcdVVclutKEq60m0XClt2LKu9sjBkv\r\n12T//VHmI4OWUPFfVOSKy+xjv/lnZznBpt1Fq6zr4R9+1d3WrpQ8Apo7r8YN\r\n4cdVmd0JOyxNc2qdpp2MJ9ho3uK+DLDcvzE=\r\n=kmO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"# SliceZone\n\nA [Slice Machine](https://slicemachine.dev) component that matches Vue/Nuxt components with Prismic data components (that we call slices). You can see it as an hybrid between a \"[components registry](https://medium.com/front-end-weekly/building-a-component-registry-in-react-4504ca271e56)\" and a router:\n\n- at build time, it scans and lists all available components [via a resolver](https://github.com/prismicio/slice-machine/tree/master/packages/nuxt-sm) (README wip)\n- when a page is hit, it fetches the corresponding content on Prismic\n- it then matches Prismic slices with components, and renders them accordingly\n\nThis implementation is meant to work with both Vue and Nuxt projects, although the auto-fetch feature is currently only available with Nuxt. Also, feel free to use this repository as a reference for building SliceZones for other frameworks ✌️\n\n## Installation\n\n```bash\nyarn add vue-slicezone\n```\n\nYou may have to configure your bundler to transpile it from es6:\n\n```javascript\n// nuxt.config.js\nbuild: {\n  transpile: [\"vue-slicezone\"];\n}\n```\n\nIt expects a `$prismic` object to be injected by [`@prismicio/vue`](https://github.com/prismicio/prismic-vue) or [`@nuxtjs/prismic`](https://github.com/nuxt-community/prismic-nuxt). If you don't have a running project yet, the easisest way would be to take SliceMachine's [quick start guide](https://www.slicemachine.dev/documentation/getting-started).\n\n## Examples\n\nDepending on your context, you may use the SliceZone with or without `nuxt-sm`. Its role is to auto-scan your librairies and make a resolver out of them. As this became irrelevant in Nuxt 2.10+ thanks to [@nuxt/components](https://github.com/nuxt/components), we'll deprecate `nuxt-sm` in favour of extending components folder (see [this paragraph](https://github.com/nuxt/components#library-authors)).\n\n### with nuxt-sm and auto-fetch\n\nThis example assumes you created an `sm.json` file at the root of your project, and listed `nuxt-sm` in your Nuxt modules config:\n\n**sm.json**\n\n```JSON\n{\"libraries\": [\"@/slices\", \"vue-essential-slices\"]}\n```\n\n**pages/\\_uid.vue**\n\n```vue\n<template>\n  <slice-zone type=\"page\" :uid=\"$route.params.uid\" />\n</template>\n<script>\nimport SliceZone from \"vue-slicezone\";\n\nexport default {\n  components: {\n    SliceZone,\n  },\n};\n</script>\n```\n\n👆 This would fetch a Prismic document of type \"page\", by its UID. For each slice found, it would take its `slice_type` and find a related PascalNamed components in `/slices` folder or in `vue-essential-slices` node module.\n\n### with custom query & w/o nuxt-sm\n\nYou can also pass a `slices` array to the SliceZone. usually, this would be the `data.body` of a Prismic API response. You can pass your custom resolver too:\n\n```javascript\n<template>\n  <slice-zone type=\"page\" :resolver=\"resolver\" :slices=\"page.data.body\" />\n</template>\n<script>\nimport * as MySlices from '@/slices'\nimport SliceZone from 'vue-slicezone'\n\nexport default {\n  components: {\n    SliceZone\n  },\n  async asyncData({ params, $prismic }) {\n    return {\n        page: await $prismic.api.getByUID('page', params.uid)\n      }\n  },\n  methods: {\n    resolver({ sliceName, slice, i }) {\n      return MySlices[sliceName]\n    }\n  }\n}\n</script>\n```\n\n## Features\n\nFeature requests much appreciated 👇\n\n### Auto-fetch Prismic data\n\nIf no `slices` are provided, the SliceZone will auto-fetch a document based on its type and uid.\n\n```html\n<slice-zone type=\"myCustomType\" uid=\"contact\" />\n```\n\n👆 this is like passing a prop `queryType` with value `repeat` or `repeatable`.\nThis is how you would fetch a single document:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" />\n```\n\nIf slices are not stored in `body`, pass a `body` param with the key name of your zone:\n\n```html\n<slice-zone type=\"mySingleCustomType\" queryType=\"single\" body=\"another_body\" />\n```\n\nIf you need to pass params to the API call (like fetch links), pass the SliceZone a `params` object:\n\n```html\n<slice-zone\n  type=\"myCustomType\"\n  :uid=\"$route.params.uid\"\n  :params=\"{ key: 'value' }\"\n/>\n```\n\nIf you just need to pass a lang, to the API, pass the prop directly:\n\n```html\n<slice-zone type=\"myCustomType\" :uid=\"$route.params.uid\" lang=\"fr-fr\" />\n```\n\n### Auto-match components\n\nInstead of passing a resolver to the SliceZone, we offer a `nuxt-sm` module that lists and scans your components folder and creates a custom resolver out of them. Your SliceZone then acts as a large \"bucket\" of components that would get rendered solely based on how they match Prismic slices.\n\n**How it scans**\n`nuxt-sm` looks for a key `libraries` inside the `sm.json` file at the root of your project. It then scans each folder, whether it's local or in node_modules, and registers it. This is similar to how `prismic sm --ls` command works.\n\nOrder matters. If 2 slices have the same name, the first one found is used. This lets you progressively enhance your app, by replacing a default component with your own.\n\n**How it works**\nIn Prismic, each slice returned by the API contains a snake_cased `slice_type`. The SliceZone simply PascalCases this `slice_type` and asks the resolver if a component with given SliceName has been registered. If something is returned, it then passes a `slice` prop to the component and renders it.\n\nIf you created a slice in Prismic with a slice_type of value `my_component`, the SliceZone wil ask for a component with a file/folder name `MyComponent`.\n\n** custom **\n\nYou can also pass your own resolver to the SliceZone. It expects one of thesse to be returned:\n\n- a component (see 2nd example)\n- a promise that returns a component\n- an array of promises\n\n```js\nmethods: {\n    resolver({ sliceName }) {\n      return Slices[sliceName]\n    },\n    resolverP({ sliceName }) {\n      return import(`path/to/slices/${sliceName}/index.vue`)\n    },\n    resolverPs({ sliceName }) {\n      return [\n        import(`path/to/slices/${sliceName}/index.vue`),\n        import(`a/default/path/to${sliceName}/index.vue`),\n      ]\n    },\n  }\n```\n\n## Theme\n\nInspired by [`theme-ui`](https://theme-ui.com), the SliceZone supports passing a theme object or function to rendered slices. We think it's super handy for developers/designers to enforce ceertain design rules on specific pages, or if they're working with external libraries.\n\n### theme object\n\nIf you wanted your contact page to use a b&w theme, you could pass an object like this one:\n\n```javascript\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" />\n</template>\n<script>\nconst theme = {\n    color: '#FFF',\n    wrapper: {\n        style: 'background: #111'\n    }\n}\nexport default {\n    data() {\n        return {\n            theme\n        }\n    }\n}\n</script>\n```\n\n👆 How this is used depends on your implementation. See [vue-essential-slices](https://vue-essential-slices.netlify.com/) for a real world example.\n\n### scoped theme\n\nTo scope theme values to specific components, use their name as key. None of the root values would be used in that case. If you need to share some properties, spread them multiple times.\n\n```javascript\nconst theme = {\n  color: \"#111\",\n  CallToAction: {\n    color: \"#FFF\",\n  },\n};\n```\n\n### as function\n\nAlternatively , you can pass a function as theme...\n\n```javascript\nconst theme = ({ sliceName, i }) =>\n  i % 2 ? { color: \"#111\" } : { color: \"pink\" };\n```\n\n...including in a scoped theme:\n\n```javascript\nconst theme = {\n  CallToAction: ({ sliceName, i }) =>\n    i % 2 ? { color: \"#111\" } : { color: \"pink\" },\n};\n```\n\n### Named slots\n\nThe SliceZone takes advantage of Vue named slots. To use them, prefix them with the name of your component. For example, if your HeroAction components defines a `header` slot, you can access it this way in the SliceZone:\n\n```vue\n<template>\n    <slice-zone type=\"page\" uid=\"contact\" :theme=\"theme\" :slices=\"page.data.body\">\n        <template v-slot:HeroAction.header=\"primary\">\n            <header>\n                <h1>Header {{ primary.someContent }}</h1>\n            </header>\n        </template>\n    </slice-zone\n</template>\n```\n\nUsually, slice components would bind `primary` or `items` to the slot, for you to use in your template. Note that we're passing `slices` here, as named slots does not work yet with auto-fetching content.\n","gitHead":"ca31c1ba11316b96cb3ef44dbe80345a52b53951","scripts":{"lint":"eslint --ext .js,.vue .","test":"echo \"Error: no test specified\" && exit 0","audit":"better-npm-audit audit -l high -p","audit-fix":"npm audit fix"},"_npmUser":{"name":"sprite","email":"marcmcintosh1987@gmail.com"},"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (linux)","description":"A component that maps other components to Prismic slices","directories":{},"_nodeVersion":"16.14.2","dependencies":{"sm-commons":"0.1.7-alpha.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^7.32.0","better-npm-audit":"^3.4.0","eslint-plugin-vue":"^7.17.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-slicezone_0.1.7-alpha.2_1649765938141_0.15458237026836819","host":"s3://npm-registry-packages"},"deprecated":"vue-slicezone is now part of @prismicio/vue"}},"time":{"created":"2020-02-17T14:08:22.646Z","modified":"2026-08-03T02:46:32.310Z","0.0.13":"2020-02-17T14:08:22.749Z","0.0.14-alpha.0":"2020-02-17T14:15:56.567Z","0.0.14-alpha.52":"2020-02-18T11:17:22.906Z","0.0.14-alpha.53":"2020-02-18T14:59:50.538Z","0.0.14-alpha.5":"2020-02-24T17:11:03.469Z","0.0.14":"2020-02-25T10:57:56.172Z","0.0.15-alpha.2":"2020-02-25T15:24:09.080Z","0.0.15-alpha.3":"2020-02-26T10:41:29.776Z","0.0.15":"2020-02-26T10:44:36.305Z","0.0.16":"2020-02-26T10:49:06.518Z","0.0.16-alpha.0":"2020-02-26T10:49:10.206Z","0.0.17":"2020-03-04T15:09:24.406Z","0.0.17-alpha.1":"2020-03-04T15:09:38.025Z","0.0.18":"2020-04-17T10:14:43.389Z","0.0.19":"2020-04-17T13:26:10.010Z","0.0.20":"2020-04-17T13:48:00.762Z","0.0.21":"2020-04-17T15:22:56.534Z","0.0.20-alpha.2":"2020-04-29T13:35:36.332Z","0.0.22":"2020-04-29T15:44:38.466Z","0.0.23":"2020-05-05T15:57:13.623Z","0.0.24":"2020-05-20T12:25:37.146Z","0.0.24-alpha.5":"2020-05-20T12:26:13.434Z","0.0.25":"2020-05-25T14:03:39.345Z","0.0.24-alpha.6":"2020-05-25T14:03:52.353Z","0.0.26-alpha.0":"2020-05-26T14:32:08.603Z","0.0.26-alpha.1":"2020-06-02T10:45:07.979Z","0.0.26":"2020-06-08T14:59:37.741Z","0.0.27-alpha.0":"2020-06-17T10:05:34.144Z","0.0.27-alpha.24":"2020-09-14T15:02:22.874Z","0.0.27":"2020-09-14T15:02:42.372Z","0.0.28":"2020-09-14T15:03:42.922Z","0.0.28-alpha.0":"2020-12-15T11:11:20.407Z","0.0.28-alpha.1":"2020-12-15T11:57:18.531Z","0.0.29":"2020-12-22T11:27:50.554Z","0.0.28-alpha.6":"2021-01-05T10:41:05.997Z","0.0.28-alpha.8":"2021-03-01T15:01:41.624Z","0.0.30":"2021-03-01T15:02:24.544Z","0.0.28-alpha.9":"2021-03-01T15:05:50.921Z","0.1.0":"2021-06-22T15:25:10.878Z","0.0.27-beta.1":"2021-11-23T15:05:18.062Z","0.0.27-beta.2":"2021-11-24T13:07:16.661Z","0.0.28-alpha.2":"2021-11-29T14:47:48.387Z","0.0.28-alpha.3":"2021-12-02T13:08:08.199Z","0.0.28-alpha.4":"2021-12-02T16:43:11.146Z","0.0.28-alpha.5":"2021-12-06T15:04:56.916Z","0.0.28-alpha.10":"2021-12-13T15:03:50.022Z","0.0.28-alpha.11":"2021-12-13T15:42:43.123Z","0.0.28-alpha.12":"2021-12-14T09:14:07.853Z","0.0.28-alpha.13":"2021-12-14T15:42:40.569Z","0.0.28-alpha.14":"2021-12-15T10:18:35.659Z","0.0.28-alpha.15":"2021-12-16T13:45:10.620Z","0.0.28-alpha.16":"2021-12-16T13:51:11.286Z","0.0.28-alpha.17":"2021-12-17T08:58:01.592Z","0.0.28-alpha.18":"2021-12-20T15:37:00.588Z","0.0.28-alpha.19":"2021-12-21T12:21:51.120Z","0.0.28-alpha.20":"2021-12-22T10:45:31.012Z","0.0.28-alpha.21":"2021-12-22T13:02:11.077Z","0.0.28-alpha.22":"2021-12-23T16:43:40.566Z","0.0.28-alpha.23":"2022-01-03T15:24:09.224Z","0.0.28-alpha.24":"2022-01-04T16:52:05.985Z","0.0.28-alpha.25":"2022-01-10T14:51:37.338Z","0.0.28-alpha.26":"2022-01-10T16:26:58.524Z","0.0.28-alpha.28":"2022-01-11T13:35:40.039Z","0.0.28-alpha.29":"2022-01-11T14:45:56.060Z","0.0.28-alpha.30":"2022-01-11T15:11:38.671Z","0.0.28-alpha.31":"2022-01-12T11:21:58.259Z","0.0.28-alpha.32":"2022-01-12T15:09:47.583Z","0.0.28-alpha.33":"2022-01-12T15:29:01.147Z","0.0.28-alpha.34":"2022-01-13T11:11:07.513Z","0.0.28-alpha.35":"2022-01-14T17:41:29.738Z","0.0.28-alpha.36":"2022-01-18T08:48:12.339Z","0.0.28-alpha.37":"2022-01-18T11:06:05.473Z","0.0.28-alpha.38":"2022-01-18T13:32:23.801Z","0.0.28-alpha.39":"2022-01-19T11:04:09.504Z","0.0.28-alpha.40":"2022-01-19T13:23:11.080Z","0.0.28-alpha.42":"2022-01-19T17:29:51.209Z","0.0.28-alpha.43":"2022-01-20T09:38:59.627Z","0.0.28-alpha.44":"2022-01-20T10:26:27.546Z","0.0.28-alpha.45":"2022-01-20T11:12:38.674Z","0.0.28-alpha.46":"2022-01-20T13:55:16.094Z","0.0.28-alpha.47":"2022-01-20T14:52:04.007Z","0.0.28-alpha.48":"2022-01-24T09:12:26.701Z","0.0.28-alpha.49":"2022-01-24T11:48:19.153Z","0.0.28-alpha.50":"2022-01-24T14:51:44.860Z","0.0.28-alpha.51":"2022-01-24T15:36:27.434Z","0.1.1-alpha.0":"2022-01-27T12:38:39.202Z","0.1.1-alpha.1":"2022-01-27T17:21:43.741Z","0.1.1-alpha.2":"2022-01-27T18:23:35.102Z","0.1.1-alpha.3":"2022-01-28T09:58:13.734Z","0.1.1-alpha.4":"2022-01-28T20:44:59.607Z","0.1.1-alpha.5":"2022-01-31T11:41:37.269Z","0.1.1-alpha.6":"2022-01-31T18:46:58.022Z","0.1.1-alpha.7":"2022-02-01T09:56:10.825Z","0.1.1-alpha.8":"2022-02-01T12:04:20.357Z","0.1.1-alpha.9":"2022-02-01T13:41:39.215Z","0.1.1-alpha.10":"2022-02-02T09:58:20.010Z","0.1.1-alpha.11":"2022-02-03T16:12:12.958Z","0.1.1-alpha.12":"2022-02-07T13:26:26.929Z","0.1.1-alpha.13":"2022-02-07T16:03:00.993Z","0.1.1-alpha.14":"2022-02-08T14:52:01.999Z","0.1.1-alpha.15":"2022-02-08T15:05:39.088Z","0.1.1-alpha.16":"2022-02-09T15:05:12.346Z","0.1.1-alpha.17":"2022-02-10T09:51:35.110Z","0.1.1-alpha.18":"2022-02-14T14:03:52.725Z","0.1.1-alpha.19":"2022-02-15T10:46:46.652Z","0.1.1-alpha.20":"2022-02-16T10:43:18.874Z","0.1.1-alpha.21":"2022-02-16T15:10:31.264Z","0.1.1-alpha.22":"2022-02-17T13:28:50.567Z","0.1.1-alpha.23":"2022-02-17T17:14:39.104Z","0.1.1-alpha.24":"2022-02-18T10:53:57.401Z","0.1.2-alpha.0":"2022-02-18T14:09:49.009Z","0.1.1":"2022-02-21T10:55:06.649Z","0.1.2-alpha.1":"2022-02-21T11:54:21.387Z","0.1.2-alpha.2":"2022-02-21T17:36:19.498Z","0.1.2-alpha.3":"2022-02-22T11:11:11.768Z","0.1.2-alpha.4":"2022-02-22T12:32:47.692Z","0.1.2-alpha.5":"2022-02-22T13:06:34.177Z","0.1.2-alpha.6":"2022-02-22T14:39:36.160Z","0.1.2-alpha.7":"2022-02-22T15:40:42.281Z","0.1.2-alpha.8":"2022-02-22T16:00:02.354Z","0.1.2-alpha.9":"2022-02-22T17:10:39.367Z","0.1.2-alpha.10":"2022-02-23T10:29:17.049Z","0.1.2-alpha.11":"2022-02-23T18:06:48.121Z","0.1.2-alpha.12":"2022-02-24T09:51:37.711Z","0.1.2-alpha.13":"2022-02-24T10:22:20.108Z","0.1.2-alpha.14":"2022-02-24T13:36:19.699Z","0.1.2-alpha.15":"2022-02-25T15:36:24.560Z","0.1.2-alpha.16":"2022-02-25T16:49:26.516Z","0.1.2-alpha.17":"2022-02-28T16:01:08.199Z","0.1.2-alpha.18":"2022-02-28T16:57:55.241Z","0.1.2-alpha.19":"2022-03-01T14:16:27.105Z","0.1.3-alpha.0":"2022-03-01T14:26:45.915Z","0.1.3-alpha.1":"2022-03-02T16:45:09.690Z","0.1.3-alpha.2":"2022-03-03T16:35:06.473Z","0.1.2-alpha.20":"2022-03-03T16:50:00.613Z","0.1.3-alpha.3":"2022-03-04T15:15:03.952Z","0.1.3-alpha.4":"2022-03-04T16:35:39.698Z","0.1.3-alpha.5":"2022-03-07T15:46:14.742Z","0.1.2-alpha.21":"2022-03-08T10:36:22.008Z","0.1.2":"2022-03-08T13:00:42.543Z","0.1.3-alpha.6":"2022-03-08T15:35:26.139Z","0.1.3-alpha.7":"2022-03-09T14:24:44.500Z","0.1.3-alpha.8":"2022-03-09T14:57:24.663Z","0.1.3-alpha.9":"2022-03-11T15:20:16.250Z","0.1.3-alpha.10":"2022-03-11T16:03:24.959Z","0.1.3-alpha.11":"2022-03-11T17:11:10.779Z","0.1.3-alpha.12":"2022-03-15T10:29:00.912Z","0.1.3-alpha.13":"2022-03-15T15:21:19.785Z","0.1.3":"2022-03-16T13:07:14.457Z","0.1.4-alpha.0":"2022-03-16T13:35:20.085Z","0.1.4":"2022-03-16T14:05:48.752Z","0.1.5-alpha.0":"2022-03-16T14:47:02.241Z","0.1.5-alpha.1":"2022-03-17T17:48:04.882Z","0.1.5-alpha.2":"2022-03-18T16:16:36.928Z","0.1.5-alpha.3":"2022-03-23T10:57:21.782Z","0.1.5-alpha.4":"2022-03-23T11:16:15.557Z","0.1.5-alpha.5":"2022-03-25T10:42:58.157Z","0.1.5-alpha.6":"2022-03-25T13:38:55.908Z","0.1.5-alpha.7":"2022-03-25T16:19:12.372Z","0.1.5-alpha.9":"2022-03-29T14:26:06.078Z","0.1.5-alpha.10":"2022-03-29T15:24:36.141Z","0.1.5-alpha.11":"2022-03-30T09:26:14.619Z","0.1.5-alpha.12":"2022-03-30T09:56:39.674Z","0.1.5":"2022-03-30T14:02:19.942Z","0.1.6-alpha.0":"2022-04-01T10:58:40.757Z","0.1.6-alpha.1":"2022-04-05T13:12:44.960Z","0.1.6-alpha.2":"2022-04-06T17:47:29.208Z","0.1.6-alpha.3":"2022-04-07T08:46:09.632Z","0.1.6-alpha.4":"2022-04-08T08:57:38.660Z","0.1.6-alpha.5":"2022-04-08T09:28:40.555Z","0.1.6":"2022-04-08T13:30:09.252Z","0.1.7-alpha.0":"2022-04-08T14:39:23.692Z","0.1.7-alpha.1":"2022-04-11T15:13:03.265Z","0.1.7-alpha.2":"2022-04-12T12:18:58.319Z"},"bugs":{"url":"https://github.com/prismicio/sm-commons/issues"},"author":{"name":"Hugo Villain"},"license":"ISC","homepage":"https://github.com/prismicio/sm-commons#readme","keywords":["Vuejs","Prismic","slices"],"repository":{"url":"git+https://github.com/prismicio/sm-commons.git","type":"git"},"description":"A component that maps other components to Prismic slices","maintainers":[{"name":"amaurycahuet","email":"amaury.cahuet@prismic.io"},{"name":"hypervillain","email":"hugo.p.villain@gmail.com"},{"name":"lihbr","email":"hello@lihbr.com"},{"name":"npmdiscovery","email":"hugo-eland@hotmail.fr"},{"name":"sprite","email":"marcmcintosh1987@gmail.com"}],"readme":"","readmeFilename":""}