@snackprompt/snackprompt-ui

Snackprompt-ui

This repository contains a collection of VueJS components designed for sharing across different projects. These components aim to simplify the development and maintenance of consistent interfaces in various Vue applications.

Using Snackprompt-ui Components

To use a component in your Vue project, follow these steps:

1. Install Snackprompt-ui:

   pnpm i @snackprompt/snackprompt-ui

2. Import the Component in Your Vue File:

   // Import the component you want to use
   import { SpHeading } from '@snackprompt/snackprompt-ui'
   // Import the library's styles
   import '@snackprompt/snackprompt-ui/style.css'

3. Use the Component in Your Template:

   <template>
     <div>
       <!-- Use the imported component in your template -->
       <SpHeading h3>Hello, SnackPrompt!</SpHeading>
     </div>
   </template>

That's it! You have successfully incorporated a Snackprompt-ui component into your Vue project. Refer to the library's documentation for specific component options and features.

This section provides a step-by-step guide for users to integrate a Snackprompt-ui component into their Vue projects. It covers installation, importing, using in templates, and importing styles if needed. Adjust the instructions based on the specific features and usage patterns of your components.

Storybook

This project utilizes Storybook, a powerful tool for developing UI components in isolation. Storybook allows you to build and document individual components independently, making it easier to visualize and interact with them during the development process.

Running Storybook Locally

To run Storybook in development mode, use the following command:

pnpm run storybook

This will start Storybook on port 6006 by default. You can access the Storybook interface in your web browser at http://localhost:6006.

Building Storybook Static Files

To build static files for Storybook, use the following command:

pnpm run build-storybook

This will generate optimized static files in the storybook-static directory, ready for deployment.

Feel free to explore and interact with individual components in Storybook, providing a streamlined development and testing experience.

Running the Project Locally

To run this project locally, ensure you have the following prerequisites:

• Node.js: Version 18 or higher (Download Here)
• pnpm: A fast and disk-space-efficient package manager (Installation Guide)

Follow the steps outlined in the "Running the Project Locally" section above to set up and run the project.

Technologies Used

• Vue.js (v3.3.8): Vue is a progressive JavaScript framework used for building user interfaces. It makes it easy to develop reactive and dynamic web applications.

• TypeScript (v5.2.2): TypeScript is a superset of JavaScript that adds static typing. It enhances code quality and developer productivity.

• Vite (v5.0.0): Vite is a fast build tool that serves your code via native ES Module imports during development. It optimizes the build process for a better development experience.