The shoyify from soulsam480

shoyify's Introduction

shoyify

A vue 3 component library implementing shoyo.

Not a serious project. Learning How component libraries work and how to create one.

Usage

shoyify will be released on npm after basic components are added. To test right now

git clone https://github.com/soulsam480/shoyify

In your Vue 3 Project

Import whole library as a Vue 3 plugin without tree shaking

import shoyify from "../../shoyify";

const app = createApp()

// Tell Vue to use shoyify as a plugin
app.use(shoyify);
app.mount('#app)

Import Individual components a Vue 3 plugin with tree shaking

import {ShoyoButton} from "../../shoyify";

const app = createApp()

// Tell Vue to use the component as a plugin
app.use(ShoyoButton);
app.mount('#app)

Import individual components directly inside.vue files

<script lang="ts">
import { ShoyoButton } from "../../shoyify";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    ShoyoButton,
  },
  setup() {
    const main = ref<string>("Button");
    return { main };
  },
});
</script>

Roadmap

Inspired from Shubhadip/vue3-component-library and Vue Tailwind

shoyify's People

Contributors

Stargazers

Watchers

shoyify's Issues

Component props intellisense in typescript

So after a lot of trial and error, I was finally able to configure the typings for component props. But there are some caveats.

How it works:
When a component is imported from shoyify and registered locally, the typings will work and IntelliSense too.
ex.

<script lang="ts">
import { ShoyoButton } from "../../shoyify";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: {
    ShoyoButton,
  },
  setup() {
    const main = ref<string>("Button");
    return { main };
  },
});
</script>

In the template tag, the component prop typings will show up from the declaration files.

Caveats:
When shoyify is registered as a plugin or individual components are registered globally, the typings won't show up.
eg.

import shoyify from "../../shoyify";

const app = createApp()

// Tell Vue to use shoyify as a plugin
app.use(shoyify);
app.mount('#app)

import {ShoyoButton} from "../../shoyify";

const app = createApp()

// Tell Vue to use the component as a plugin
app.use(ShoyoButton);
app.mount('#app)