Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chakas3/nuxt-storybook-composables-example
Created with StackBlitz ⚡️
https://github.com/chakas3/nuxt-storybook-composables-example
nuxtjs storybook vuejs
Last synced: about 2 months ago
JSON representation
Created with StackBlitz ⚡️
- Host: GitHub
- URL: https://github.com/chakas3/nuxt-storybook-composables-example
- Owner: chakAs3
- Created: 2023-10-12T12:54:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-14T22:56:29.000Z (over 1 year ago)
- Last Synced: 2024-04-14T10:13:17.906Z (9 months ago)
- Topics: nuxtjs, storybook, vuejs
- Language: Vue
- Homepage: https://stackblitz.com/edit/nuxt-starter-kyutcl
- Size: 411 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nuxt Composables in Storybook
This repository serves as an example of how to integrate Nuxt composables into a Storybook environment.
By following the instructions and exploring the code provided here, you can learn how to harness the power of Nuxt composables in a Storybook setup.
## Table of Contents
- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Directory Structure](#directory-structure)
- [Contributing](#contributing)
- [License](#license)
## Introduction
The benefits of using Nuxt composables:
1. **Reusability**: Nuxt composables promote code reusability, making it easy to share and apply common functionality across your Nuxt.js project.
2. **Separation of Concerns**: Composables enhance code organization by separating logic from Vue components, resulting in cleaner and more maintainable code.
## Getting Started
Follow these instructions to set up and run the Nuxt composables in Storybook example locally.
### Prerequisites
Before you begin, ensure you have the following installed on your system:
- [Node.js](https://nodejs.org/)
- [Nuxt.js](https://nuxtjs.org/)
- [Storybook](https://storybook.js.org/)
### Installation
1. Clone this repository to your local machine:
```shell
git clone https://github.com/your-username/nuxt-composables-storybook-example.git
```
2. Navigate to the project directory:
```shell
cd nuxt-composables-storybook-example
```
3. Install the project dependencies:
```shell
pnpm install
```
## Usage
[// Provide a brief guide on how to use the Nuxt composables in Storybook provided in this example. Include any necessary steps, code snippets, or configurations that users need to be aware of.]
To start the Storybook development server, run the following command:
```shell
pnpm run storybook
```
This will open the Storybook interface in your browser, where you can view and interact with the components using Nuxt composables.
## Directory Structure
Here's an overview of the directory structure of this repository:
```
nuxt-composables-storybook-example/
├── .storybook/ # Storybook configuration
├── components/ # Vue components
├── stories/ # Storybook stories
├── nuxt-composables/ # Nuxt composables
├── pages/ # Nuxt pages
├── ...
├── package.json # Project dependencies and scripts
├── ...
```
## Contributing
We welcome contributions from the community. If you have any improvements, suggestions, or bug fixes, feel free to create a pull request. Please make sure to follow our [contribution guidelines](CONTRIBUTING.md).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
We hope this repository helps you understand how to use Nuxt composables in a Storybook environment effectively. If you have any questions or encounter issues, please feel free to open an issue or reach out to us.
Happy coding! 😄🚀