shared-stories v1.0.1
📦 Shared Stories Package
Welcome to the Shared Stories package! This package provides a collection of reusable assets, components, and stories that can be easily integrated into your project. It includes multiple directories such as atmos
, public
, sass
, and stories
to help streamline your development workflow.
🚀 Features
🔧 Reusable Components:
Vue components located in theatmos
folder for easy integration into your projects.🖼️ Shared Assets:
Includes shared public assets and styles located in thepublic
andsass
folders.📖 Storybook Stories:
Visualize and test components using pre-built Storybook stories in thestories
folder.⚙️ CLI Tool:
Comes with a command-line tool that copies these directories into your project’s working directory under a folder namedshared-stories
.
📥 Installation
Install the package via npm:
npm install shared-stories
🛠️ Initialize the Package
Run the following command to set up the shared stories in your project:
npx shared-stories
This command will copy essential folders (atmos
, public
, sass
, stories
) into your project.
💻 Integrating Shared Components into a Vue Project
To automatically load and register the shared Vue components in your application, update your component loader (e.g., baseComponent.js
) as follows:
const modules = import.meta.glob('@/shared-stories/atoms/*/*.vue', { eager: true });
export default function loadComponents(app) {
for (const path in modules) {
const componentName = path.split('/').at(-1).split('.')[0];
app.component(componentName, modules[path].default);
}
}
Then, in your main.js
file, import and invoke the component loader before mounting the app:
import { createApp } from 'vue';
import App from './App.vue';
import loadComponents from './baseComponent';
const app = createApp(App);
loadComponents(app);
app.mount('#app');