Vue

Amplify Vue Development: Introducing Plus UI - Your Vue to Excellence

Vue Installation

Please find below installation guide for integrating the Plus UI component library into a Vue project using Vite:

1. Create a new Vue project using Vite:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes("-"),
        },
      },
    }),
  ],
});

To learn more, please check how to use both Vue and Web Components.

2. Add Plus UI library to your component:

In your Vue component file, import the Plus UI library and its styles.

// YourComponent.vue

<script setup>
// your imports
import "@plusui/core";
import "@plusui/core/style.css";

</script>

3. Start using Plus UI components:

Now, you can use Plus UI components in your Vue project. Simply include them in your templates as needed.

<script setup>
// your imports
import "@plusui/core";
import "@plusui/core/style.css";

const handleClick = () => {
  console.log("Hello Plus UI");
};
</script>

<template>
  <plus-button status="primary" @plus-click="handleClick">Hello Plus UI</plus-button>
</template>

<style scoped>
 // your custom styles
</style> 

Get help

Plus UI is more than a library; it’s a community. Engage with fellow developers, share your Plus UI projects, and contribute to the library’s growth. Your insights, feedback, and contributions drive the evolution of Plus UI:

Join Github Community

Join Discord Community

Join us on Twitter