{"id":16708087,"url":"https://github.com/ogerly/nuxt-vuetify-storybook","last_synced_at":"2025-04-05T04:41:29.221Z","repository":{"id":204839220,"uuid":"712750463","full_name":"ogerly/nuxt-vuetify-storybook","owner":"ogerly","description":"The GitHub page represents a Nuxt 3 minimal starter project with Storybook and Vuetify integration. The project is currently under active development, with expectations of numerous changes in the future. Its primary goal is to establish a robust framework for professional front-end development, which can serve as a template for larger projects ","archived":false,"fork":false,"pushed_at":"2023-11-18T06:49:03.000Z","size":6571,"stargazers_count":2,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T12:42:57.875Z","etag":null,"topics":["cromatic","docsify","figma","nuxt3","stackblitz","storybook7","vuetify3"],"latest_commit_sha":null,"homepage":"https://ogerly.github.io/nuxt-vuetify-storybook/#/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ogerly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-01T05:33:25.000Z","updated_at":"2024-04-15T06:34:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"26299fff-8363-4c92-909b-99ae45a7f110","html_url":"https://github.com/ogerly/nuxt-vuetify-storybook","commit_stats":null,"previous_names":["ogerly/nuxt-vuetify-storybook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogerly%2Fnuxt-vuetify-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogerly%2Fnuxt-vuetify-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogerly%2Fnuxt-vuetify-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogerly%2Fnuxt-vuetify-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ogerly","download_url":"https://codeload.github.com/ogerly/nuxt-vuetify-storybook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289393,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cromatic","docsify","figma","nuxt3","stackblitz","storybook7","vuetify3"],"created_at":"2024-10-12T19:42:02.765Z","updated_at":"2025-04-05T04:41:29.203Z","avatar_url":"https://github.com/ogerly.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt 3 Minimal Starter with Storybook and Vuetify\n\n![Storybook](https://img.shields.io/badge/Nuxt.js-00DC82.svg?style=for-the-badge\u0026logo=nuxtdotjs\u0026logoColor=white)\n![Storybook](https://img.shields.io/badge/Vuetify-1867C0.svg?style=for-the-badge\u0026logo=Vuetify\u0026logoColor=white)\n![License](https://img.shields.io/badge/Storybook-FF4785.svg?style=for-the-badge\u0026logo=Storybook\u0026logoColor=white)\n![License](https://img.shields.io/badge/Figma-F24E1E.svg?style=for-the-badge\u0026logo=Figma\u0026logoColor=white)\n![License](https://img.shields.io/badge/Docsify-2ECE53.svg?style=for-the-badge\u0026logo=Docsify\u0026logoColor=white)\n\n\u003e This project is currently under active development, and we anticipate numerous changes in the near future. Our primary objective is to establish a robust framework for professional front-end development, which can serve as a template for larger projects. Additionally, we aim to structure this project as a tutorial, with completion targeted for Q1/2024.\n\n![](/public/ocelot-storybook.png)\n\nThe interplay of Nuxtjs, Vuetify, and Storybook now works quite well. However, it's not entirely straightforward, and the documentation on Nuxtjs is not always up to date. It took some time to achieve a clean integration, but with the modules provided by Nuxtjs, it is now possible to use Vuetify and Storybook together in a single project.\n\nDemo: [https://stackblitz.com/~/github.com/ogerly/nuxt-vuetify-storybook](https://stackblitz.com/~/github.com/ogerly/nuxt-vuetify-storybook)\n\n## Setup\n\nMake sure to install the required dependencies by running one of the following commands:\n\n```bash\n# Using npm\nnpm install\n\n# Using pnpm\npnpm install\n\n# Using yarn\nyarn install\n```\n\n## Development Server\n\nStart the development server on `http://localhost:3000` with one of the following commands:\n\n```bash\n# Using npm\nnpm run dev\n\n# Using pnpm\npnpm run dev\n\n# Using yarn\nyarn dev\n```\n\n## Production\n\nBuild the application for production with the following commands:\n\n```bash\n# Using npm\nnpm run build\n\n# Using pnpm\npnpm run build\n\n# Using yarn\nyarn build\n```\n\nTo preview the production build locally:\n\n```bash\n# Using npm\nnpm run preview\n\n# Using pnpm\npnpm run preview\n\n# Using yarn\nyarn preview\n```\n\nFor more information on deployment, please refer to the [Nuxt deployment documentation](https://nuxt.com/docs/getting-started/deployment).\n\n---\n\n# Dokumentation\n\nWe use Docsify in this project, which is available at http://localhost:4000. Before you start setting up Ocelot, please read this carefully and follow all the steps.\n\nPay attention to the dependencies and the interaction of the individual tools and plugins. This project is also intended for teaching and training purposes, covering a wide range of professional front-end development.\n\nTo run the documentation on http://localhost:4000, you can use the console command 'pnpm run docsify'.\n\n---\n\n# Front development\n\nNuxt, Vuetify, Storybook, Figma, Cromatic\n\n### Interaction between Storybook, Figma and Chromatic\n\nThe interaction between Storybook, Figma and Chromatic plays a decisive role in the professional development process and promotes collaboration between designers, developers and customers.\n\n## Storybook\n\n- **Purpose**: Storybook is a tool for developing components and user interfaces. It enables developers to create and test UI components in isolation.\n- **Use**: Developers use Storybook to create and present user interface components. They can define and test different states and scenarios for these components. This facilitates iteration and debugging.\n\n## Figma\n\n- **Purpose**: Figma is a design and collaboration tool that allows designers to create, edit and share user interfaces.\n- **Use**: Designers use Figma to create and prototype the visual design of the user interface. They can create mockups, wireframes and interactive prototypes. Figma also enables collaboration as multiple users can work on a design simultaneously.\n\n## Chromatic\n\n- **Purpose**: Chromatic is a tool for visual regression and UI testing. It enables the continuous monitoring of UI changes and the early detection of visual problems.\n- **Use**: Chromatic is used to ensure the visual consistency of UI components, especially in relation to design changes and updates. It captures screenshots of storybook components and compares them to detect visual regressions.\n\n  - The Ocelot Storybook of this repository can be found here: [https://www.chromatic.com/library?appId=65440b50eff8b11b8e1d0939\u0026branch=master](https://www.chromatic.com/library?appId=65440b50eff8b11b8e1d0939\u0026branch=master)\n\n  - The Ocelot Storybook Build at Cromatic of this repository can be found here: [https://www.chromatic.com/build?appId=65440b50eff8b11b8e1d0939](https://www.chromatic.com/build?appId=65440b50eff8b11b8e1d0939)\n\n## Interaction\n\n1. **Designer and Figma**:\n\n   - Designers use Figma to create the visual design and create prototypes.\n   - They share their design work with the development team and the customer via Figma.\n\n2. **Developers and Storybook**:\n\n   - Developers use Storybook to implement and test the created components based on the Figma designs.\n   - They create Storybook stories to showcase the functionality and appearance of the components.\n\n3. **chromatic and testing**:\n\n   - Chromatic can be integrated into the development process to ensure that visual regressions are avoided.\n   - Every time a change is made in Storybook, screenshots are automatically taken and compared to previous versions. Any visual deviation is recognised and logged.\n\n4. **Customer and approval**:\n   - The customer can check the current status of the design and prototypes via Figma.\n   - With Chromatic, the customer can ensure that the implementation of the UI components meets the design specifications by monitoring visual regressions.\n\nThe interaction of Storybook, Figma and Chromatic promotes seamless collaboration between designers and developers, enables efficient iteration and ensures that the UI components created meet the design specifications. This contributes to the quality and consistency of the end product and facilitates communication and approval with the customer.\n\n### Storybook\n\nAfter starting the application, you can call up the storybook at [http://localhost:6006/](http://localhost:6006/).\n\n### Storybook to Chromatic\n\nYou can connect your Storybook to Chromatic. To do this, you need an account with [Chromatic](https://www.chromatic.com/).\n\nYou can publish your storybook to Chromatic with the following command:\n\n### Publish Storybook to Cromatic\n\n```bash\n  pnpm run build-storybook\n  pnpm dlx http-server ./path/to/build\n  npm install chromatic --save-dev\n  npx chromatic --project-token=\u003cyour-project-token\u003e\n```\n\nYou can find the Ocelot Storybook of this repository here: [https://65440b50eff8b11b8e1d0939-lpcuymgxzi.chromatic.com/](https://65440b50eff8b11b8e1d0939-lpcuymgxzi.chromatic.com/)\n\n### If a Storybook build has been made, the Storybook can be accessed via this command at localhost:8080\n\n```bash\n  pnpm dlx http-server ./storybook-static\n```\n\n---\n\n# Tutorials\n\n- [Figma (german)](https://www.youtube.com/playlist?list=PLgZriansjqQ5JkWX0X0rO8Clm5_3mKQ4M)\n- [Figma Prototyping Tutorial (german)](https://youtu.be/THZ4DfyGsgM)\n- [Figma Tutorial für Anfänger (2023) (german)](https://youtu.be/YtLbCASJAL0)\n- [How to Integrate Figma Design Systems with Storybook](https://youtu.be/O3afqyCS2-o)\n\n---\n\n---\n\n## Reconstructing the Starter:\n\nWe have built the starter as follows.\n\n### The most crucial point is to use precise versions at the moment.\n\n- Nuxt: 3.6.5\n- Vuetify: 3.3.17\n- Storybook: 7.4.4\n\n## Installation Process\n\n1. Create a new Nuxt 3 project using the following command:\n\n```bash\npnpm dlx nuxt@3.6.5 init \u003cproject-name\u003e\n# Make sure you have 'shamefully-hoist=true' in your .npmrc before running pnpm install\ncd \u003cproject-name\u003e\npnpm install\n```\n\n2. Install Storybook and Vuetify:\n\n```bash\nnpx storybook-nuxt init\npnpm add @invictus.codes/nuxt-vuetify vuetify\n```\n\n3. Update your `nuxt.config.ts` with the following configuration:\n\n```typescript\nexport default defineNuxtConfig({\n  devtools: { enabled: true },\n  modules: [\n    \"@invictus.codes/nuxt-vuetify\",\n    \"@nuxtjs/storybook\",\n    \"@nuxtjs/eslint-module\",\n  ],\n  vuetify: {\n    vuetifyOptions: {},\n    moduleOptions: {\n      treeshaking: false,\n      useIconCDN: true,\n      styles: \"none\",\n      autoImport: false,\n      useVuetifyLabs: true,\n    },\n  },\n  css: [\"vuetify/styles\"],\n  storybook: {\n    url: \"http://localhost:6006\",\n    storybookRoute: \"/__storybook__\",\n    port: 6006,\n  },\n});\n```\n\n4. Start the development server:\n\n```bash\n  pnpm run dev\n```\n\n## Storybook Integration\n\nTo integrate Storybook with Nuxt 3, please refer to the [Storybook Nuxt module documentation](https://storybook.nuxtjs.org/).\n\n```\nMake sure you have the following versions for a smooth experience:\n- Nuxt: 3.6.5\n- Vuetify: 3.3.17\n- Storybook: 7.4.4\n```\n\nWe are monitoring the development of the following modules:\n\n- @invictus.codes/nuxt-vuetify\n\n  - The module at Nuxtjs is: [https://nuxt.com/modules/nuxt-vuetify](https://nuxt.com/modules/nuxt-vuetify)\n\n- @nuxtjs/storybook\n\n  - [https://storybook.nuxtjs.org/getting-started/setup!!!](https://storybook.nuxtjs.org/getting-started/setup!!!)\n  - The module at Nuxtjs is: [https://nuxt.com/modules/storybook](https://nuxt.com/modules/storybook)\n\n  ```\n  ! Important Note !\n  - MDI ICON ! Es ist wichtig in der .storybook/preview.ts noch die alten mdi-icon Bibliothek einzubinden. (@mdi/font)\n  ```\n\n\u003e .storybook/preview.ts\n\u003e\n\u003e      import 'vuetify/lib/styles/main.css'\n\u003e      import '@mdi/font/scss/materialdesignicons.scss'\n\n- Use the installation instructions from [https://storybook.nuxtjs.org/getting-started/setup](https://storybook.nuxtjs.org/getting-started/setup). The instructions from the module page did not lead to the desired outcome.\n- Vite-plugin-vuetify can cause errors when building Storybook if exact versions are not followed. Remove vite-plugin-vuetify and follow the instructions.\n\n```\n\nTo integrate Storybook with Nuxt 3, please refer to the [Storybook Nuxt module documentation](https://storybook.nuxtjs.org/).\n\nFor a detailed tutorial on integrating Storybook with Vuetify in your Nuxt application, you can read this [Medium article](https://medium.com/@chakas3/tutorial-integrating-storybook-with-vuetify-in-your-nuxt-application-ac8af5a0a946).\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogerly%2Fnuxt-vuetify-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fogerly%2Fnuxt-vuetify-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogerly%2Fnuxt-vuetify-storybook/lists"}