Loading...
Loading...
Setup and use PrimeVue UI component library in Vue/Vite projects with auto-import, theming, and component configuration. Use when working with PrimeVue components, setting up PrimeVue in a Vue project, configuring themes (Aura, Lara, etc.), or implementing auto-import for PrimeVue components.
npx skill4agent add kindy/skills primevuenpm install primevue @primeuix/themesmain.tsimport { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import App from './App.vue'
const app = createApp(App)
app.use(PrimeVue, {
theme: {
preset: Aura // Available: Aura, Lara, Nora, etc.
}
})
app.mount('#app')npm install -D unplugin-vue-components @primevue/auto-import-resolvervite.config.tsimport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
PrimeVueResolver()
]
})
],
})<template>
<Button label="Click Me" />
<InputText v-model="value" placeholder="Enter text" />
<DataTable :value="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// No PrimeVue component imports needed - handled by auto-import
const value = ref('')
const items = ref([])
</script><Button label="Text" /><InputText v-model="value" /><Dropdown v-model="selected" :options="items" /><DataTable :value="data" /><Dialog v-model:visible="show" /><Card><template #title>Title</template></Card>AuraLaraNora