Установка

npm install @procontext.new/lp-ui-kit

main.js(ts);

import { createApp } from 'vue';

import '@procontext.new/lp-ui-kit/style.css';

import App from './App.vue';

let app = createApp(App);

Полный импорт

import { createApp } from 'vue';
import '@procontext.new/lp-ui-kit/style.css';
import LpUIKit from '@procontext.new/lp-ui-kit';

let app = createApp(App);

app.use(LpUIKit);

Ручной импорт

<template>
  <p-button>Test</p-button>
</template>

<script setup>
import { PButton } from '@procontext.new/lp-ui-kit';
</script>

Автоматический импорт только используемых компонентов (рекомендуемый)

npm i --save-dev [email protected]

vite.config.js;

import { fileURLToPath, URL } from 'node:url';

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

import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        (componentName) => {
          // where `componentName` is always CapitalCase
          if (componentName.match(/^P[A-Z]/)) {
            return { name: componentName, from: '@procontext.new/lp-ui-kit' };
          }
        },
      ],
    }),
  ],
});

Теперь можно без явного импорта использовать компоненты во всех .vue файлах.