Slicekit is a Simple, Useful & modular Prismic slices to get your project started.
- 📣 Contest Announcement Blog Post, check rules and additional information there!
- 🌐 Contest Forum Section, get help and share feedback here~
- 🔪 Slice Machine Documentation, to learn more about Slice Machine
- 📖 Prismic Vue.js Documentation, to learn more about Prismic with Vue.js
- 🎨 Slicekit Design Concepts, to view Slicekit, slice designs
Slicekit was designed using Figma, anyone can access the figma file HERE with viewing permissions. Feel free to reach out if you would like to contribute on the design. Make sure to create a Figma account.
Some quick reminders to help you developing your library with Slice Machine and the Slice Builder. Please refer to the documentation if you are looking for more in-depth knowledge.
To create a slice run:
$ yarn prismic:slice
# The CLI will then guide you through the process...This will create a new directory inside ./slices named after the provided slice name. Inside it index.vue is the slice component itself.
Slices behave just like any regular Nuxt.js component but receives a slice prop containing its slice fields. They are run in a Nuxt context meaning that any configuration / module you add to your nuxt.config.js file will reflect as expected on those. For example, if you want to use Tailwind CSS, its setup remains exactly the same with @nuxtjs/tailwindcss.
For comprehensive documentation about creating your own slices check the dedicated documentation.
To launch the Slice Builder you need to run 2 terminals: one for Storybook, one for the Slice Builder itself.
# On a first terminal
$ yarn storybook # or with npm: `$ npm run storybook`
# On the second terminal
$ yarn prismic sm --developThis will launch Storybook on port 3003 and the Slice Builder on port 9999, you can open a third terminal to create slices from or launch other commands...
For comprehensive documentation about using the Slice Builder check the dedicated documentation.
The contact form slice, uses formspree for its funcitionality. In order to enable form submissions you have to create an account in formspree, create a new project, create a new form, and copy the full url provided, example: https://formspree.io/f/someEndpoint.
Then add the url on prismic's dashboard:
To keep track of your progress and to be sure not to miss anything here's a simple checklist you can use. Once everything ticks you should be ready to submit your library to us by tagging @prismicio with #SliceContest on Twitter.
- My library contains at least 5 different slices
- I have updated the LICENSE to credit myself for my library
- The Storybook documentation is hosted here: https://slicekit.dev/playground
- Added a test website preview using slices & prismic here: https://slicekit.dev/
- My library does not contain any non-public licensed assets
☝️ For comprehensive rules refer to the contest blog post.
Slicekit was designed & developed by Agnel Nieves. All design assets and source code is original and it does not contain any non-public licensed assets. The Nuxt-Slicemachine starter codebase was forked from prismic community.
- Improve accessibility
- Improve image performance, lazy loading
- Add Contact slice
- Improve SEO
