@crystal-creations/crystal-components

@crystal-creations/crystal-components

A vuetify based component library from Servely.

Usage in nuxt 3

1. Install with

   npm install @crystal-creations/crystal-components

2. Add the following to your nuxt.config.ts.

   export default defineNuxtConfig({
     app: {
       // ...
       modules: [
         // ...
         "@crystal-creations/crystal-components/nuxt",
       ],
     },
   });
   

3. Add the component to your Vue component.

   <template>
      <CLicenseCard
        :software-info="{
          name: '@crystal-creations/crystal-components',
          version: 'v1.0.0',
          repositoryLink:
            'https://github.com/servely/crystal-components',
          notice: 'MIT',
        }"
      ></CLicenseCard>
   </template>
   

Usage in vue 3

1. Install with

   npm install @crystal-creations/crystal-components

2. Add the following to your Vue main.ts.

   import { CLicenseCard } from "@crystal-creations/crystal-components";
   import "@crystal-creations/crystal-components/styles";
   
   // ...
   
   const app = createApp(App)
   
   app.component("CLicenseCard", CLicenseCard);
   

3. Add the component to your Vue component.

   <template>
      <CLicenseCard
        :software-info="{
          name: '@crystal-creations/crystal-components',
          version: 'v1.0.0',
          repositoryLink:
            'https://github.com/servely/crystal-components',
          notice: 'MIT',
        }"
      ></CLicenseCard>
   </template>
   

Development

There are two ways develop new or improve existing components:

• Creating a new Story in the stories/ directory for the new component and running storybook (recommended)
• Developing inside a nuxt project
  1. Install the module in a nuxt project using the instructions above
  2. Run yarn link in the component repo
  3. Run yarn link @crystal-creations/crystal-components in the nuxt project
  4. You can now use components from the library with hot reloading etc.

To add a new component:

1. Create the component in src/components
2. Add it to src/index.ts and src/nuxt.mjs