Add auto-import guide
Cagatay Civici
parent
0996e90188
commit
c3d791be08
|
|
@ -9,8 +9,8 @@
|
|||
"to": "/introduction"
|
||||
},
|
||||
{
|
||||
"name": "Installation",
|
||||
"to": "/installation"
|
||||
"name": "Setup",
|
||||
"to": "/setup"
|
||||
},
|
||||
{
|
||||
"name": "Playground",
|
||||
|
|
@ -44,6 +44,10 @@
|
|||
"name": "Options",
|
||||
"to": "/configuration"
|
||||
},
|
||||
{
|
||||
"name": "Auto Import",
|
||||
"to": "/autoimport"
|
||||
},
|
||||
{
|
||||
"name": "CSS Layer",
|
||||
"to": "/csslayer"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<li class="mb-4">
|
||||
<PrimeVueNuxtLink to="/introduction" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
|
||||
<PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<PrimeVueNuxtLink to="/introduction" class="linkbox active font-semibold py-3 px-4">
|
||||
<PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4">
|
||||
<span>Get Started</span>
|
||||
<i class="pi pi-arrow-right ml-3"></i>
|
||||
</PrimeVueNuxtLink>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
A complete example using a PrimeVue and unplugin is available at <a href="https://github.com/primefaces/primevue-examples/tree/main/auto-import" rel="noopener noreferrer">primevue-examples</a> repository. You can also view this sample
|
||||
live at <a href="https://stackblitz.com/edit/vitejs-vite-cbjzs7?file=vite.config.ts" target="_blank" rel="noopener noreferrer">Stackblitz</a>.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Button from 'primevue/button';
|
||||
import App from './App.vue'
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue);
|
||||
app.component('InputText', InputText);
|
||||
app.component('Button', Button);
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The <a href="https://github.com/unplugin/unplugin-vue-components" target="_blank" rel="noopener noreferrer">unplugin-vue-components</a> library can automatically import and register PrimeVue components with the built-in resolver. Let's
|
||||
begin with installing the library.
|
||||
</p>
|
||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>Next step would be adding the <i>PrimeVueResolver</i> at vite.config using the <i>Components</i> plugin.</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<p>
|
||||
That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the
|
||||
<a href="https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#configuration" target="_blank" rel="noopener noreferrer">official documentation</a>.
|
||||
</p>
|
||||
<DocSectionCode :code="code3" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code1: {
|
||||
basic: `
|
||||
npm i unplugin-vue-components -D
|
||||
`
|
||||
},
|
||||
code2: {
|
||||
basic: `
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import {PrimeVueResolver} from 'unplugin-vue-components/resolvers';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
resolvers: [
|
||||
PrimeVueResolver()
|
||||
]
|
||||
})]
|
||||
})
|
||||
`
|
||||
},
|
||||
code3: {
|
||||
basic: `
|
||||
import { createApp } from "vue";
|
||||
import PrimeVue from "primevue/config";
|
||||
import App from './App.vue'
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue);
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>Auto Import - PrimeVue</Title>
|
||||
<Meta name="description" content="On-demand PrimeVue components with auto importing." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Auto Import</h1>
|
||||
<p>On-demand PrimeVue components with auto importing.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ExampleDoc from '@/doc/autoimport/ExampleDoc.vue';
|
||||
import OverviewDoc from '@/doc/autoimport/OverviewDoc.vue';
|
||||
import UnpluginDoc from '@/doc/autoimport/UnpluginDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
component: OverviewDoc
|
||||
},
|
||||
{
|
||||
id: 'unplugin',
|
||||
label: 'Unplugin',
|
||||
component: UnpluginDoc
|
||||
},
|
||||
{
|
||||
id: 'example',
|
||||
label: 'Example',
|
||||
component: ExampleDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<Head>
|
||||
<Title>Installation - PrimeVue</Title>
|
||||
<Meta name="description" content="Installation guides for popular development environments." />
|
||||
<Title>Setup - PrimeVue</Title>
|
||||
<Meta name="description" content="Setup guides for popular development environments." />
|
||||
</Head>
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Installation</h1>
|
||||
<h1>Setup</h1>
|
||||
<p>Installation guides for popular development environments.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import GuidesDoc from '@/doc/installation/GuidesDoc.vue';
|
||||
import GuidesDoc from '@/doc/setup/GuidesDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
Loading…
Reference in New Issue