Add guide for CDN, menu reorg
Cagatay Civici
parent
438eae57b5
commit
d27c3bd5b2
|
|
@ -9,16 +9,8 @@
|
||||||
"to": "/introduction"
|
"to": "/introduction"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Vite Setup",
|
"name": "Installation",
|
||||||
"to": "/vite"
|
"to": "/installation"
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Nuxt Setup",
|
|
||||||
"to": "/nuxt"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Configuration",
|
|
||||||
"to": "/configuration"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Playground",
|
"name": "Playground",
|
||||||
|
|
@ -26,6 +18,38 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Installation",
|
||||||
|
"icon": "pi pi-cloud-download",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Vite",
|
||||||
|
"to": "/vite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Nuxt",
|
||||||
|
"to": "/vite"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "CDN",
|
||||||
|
"to": "/cdn"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Configuration",
|
||||||
|
"icon": "pi pi-cog",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Options",
|
||||||
|
"to": "/configuration"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "CSS Layer",
|
||||||
|
"to": "/csslayer"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Components",
|
"name": "Components",
|
||||||
"icon": "pi pi-compass",
|
"icon": "pi pi-compass",
|
||||||
|
|
@ -536,10 +560,6 @@
|
||||||
"name": "Accessibility",
|
"name": "Accessibility",
|
||||||
"to": "/guides/accessibility"
|
"to": "/guides/accessibility"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "CSS Layer",
|
|
||||||
"to": "/guides/csslayer"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "PrimeTV",
|
"name": "PrimeTV",
|
||||||
"icon": "pi pi-youtube",
|
"icon": "pi pi-youtube",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Include the component to use with a script tag.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Create an app container element and setup the application using <i>createApp</i>.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<body>
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const app = createApp({
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
|
<\/script>
|
||||||
|
</body>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>A complete example using a PrimeVue DatePicker. You can also view this sample live at <a href="https://stackblitz.com/edit/web-platform-xceybs?file=index.html" target="_blank" rel="noopener noreferrer">Stackblitz</a>.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>PrimeVue + CDN</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
|
||||||
|
<script src="https://unpkg.com/primevue/core/core.min.js"><\/script>
|
||||||
|
<script src="https://unpkg.com/primevue/calendar/calendar.min.js"><\/script>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<p-datepicker v-model="date"></p-datepicker>
|
||||||
|
<br /><br />
|
||||||
|
{{ date }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { createApp, ref } = Vue;
|
||||||
|
|
||||||
|
const app = createApp({
|
||||||
|
setup() {
|
||||||
|
const date = ref();
|
||||||
|
return {
|
||||||
|
date,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
app.use(primevue.config.default);
|
||||||
|
app.component('p-datepicker', primevue.calendar);
|
||||||
|
|
||||||
|
app.mount('#app');
|
||||||
|
<\/script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, only sets up the configuration object without affecting your
|
||||||
|
application.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
app.use(primevue.config.default);
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>
|
||||||
|
You can use PrimeVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses
|
||||||
|
<a href="https://www.unpkg.com/" rel="noopener noreferrer">unpkg</a> however other providers such as <a href="https://www.jsdelivr.com" target="_blank" rel="noopener noreferrer">jsdeliver</a> and
|
||||||
|
<a href="https://cdnjs.com" target="_blank" rel="noopener noreferrer">cdnjs</a> can also be used.
|
||||||
|
</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
https://unpkg.com/vue@3/dist/vue.global.js
|
||||||
|
https://unpkg.com/primevue/core/core.min.js
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>Include the theme file with a link element, see <NuxtLink to="/theming/#themes">themes</NuxtLink> section for the complete list of available themes to choose from.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/primevue/resources/themes/lara-light-green/theme.css" />
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs"></DocSectionText>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<div class="card">
|
||||||
|
<NuxtLink to="/vite">
|
||||||
|
<span class="images">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite.svg" />
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/vite-2.svg" class="original" />
|
||||||
|
</span>
|
||||||
|
<span class="title">VITE</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<NuxtLink to="/nuxt">
|
||||||
|
<span class="images">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt.svg" />
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/nuxt-2.svg" class="original" />
|
||||||
|
</span>
|
||||||
|
<span class="title">NUXT</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<NuxtLink to="/cdn">
|
||||||
|
<span class="images">
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/html.svg" />
|
||||||
|
<img src="https://primefaces.org/cdn/primevue/images/logos/installation/html-2.svg" class="original" />
|
||||||
|
</span>
|
||||||
|
<span class="title">CDN</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card {
|
||||||
|
min-width: 15rem;
|
||||||
|
min-height: 15rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card .images {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img {
|
||||||
|
height: 62px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card img.original {
|
||||||
|
opacity: 0;
|
||||||
|
margin-top: -62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a:hover img {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a:hover img.original {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a:hover .title {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<p>
|
<p>
|
||||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||||
Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
|
Normalize, or similar, a custom CSS layer configuration might be necessary with the <i>cssLayerOrder</i> option to make sure primevue layer is defined afterward. This only applies to Styled Mode as Unstyled Mode does not use any default
|
||||||
styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for more information.
|
styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more information.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide for detailed information.</p>
|
<p>Defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for detailed information.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@
|
||||||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
<p>
|
<p>
|
||||||
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
The style classes of PrimeVue are defined under the <i>primevue</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
|
||||||
Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/guides/csslayer">CSS Layer</NuxtLink> guide
|
Normalize, or similar, a custom CSS layer configuration might be necessary. This only applies to Styled Mode as Unstyled Mode does not use any default styles or layers. View the <NuxtLink to="/csslayer">CSS Layer</NuxtLink> guide for more
|
||||||
for more information.
|
information.
|
||||||
</p>
|
</p>
|
||||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<Head>
|
||||||
|
<Title>Install PrimeVue with CDN</Title>
|
||||||
|
<Meta name="description" content="Setting up PrimeVue in a Vite project" />
|
||||||
|
</Head>
|
||||||
|
<div class="doc">
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Install PrimeVue with Vite</h1>
|
||||||
|
<p>Setting up PrimeVue in a Vite project.</p>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ComponentDoc from '@/doc/cdn/ComponentDoc.vue';
|
||||||
|
import CreateAppDoc from '@/doc/cdn/CreateAppDoc.vue';
|
||||||
|
import ExampleDoc from '@/doc/cdn/ExampleDoc.vue';
|
||||||
|
import PluginDoc from '@/doc/cdn/PluginDoc.vue';
|
||||||
|
import ScriptDoc from '@/doc/cdn/ScriptDoc.vue';
|
||||||
|
import ThemingDoc from '@/doc/cdn/ThemingDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'script',
|
||||||
|
label: 'Script',
|
||||||
|
component: ScriptDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'createapp',
|
||||||
|
label: 'CreateApp',
|
||||||
|
component: CreateAppDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'plugin',
|
||||||
|
label: 'Plugin',
|
||||||
|
component: PluginDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'theming',
|
||||||
|
label: 'Theming',
|
||||||
|
component: ThemingDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'component',
|
||||||
|
label: 'Component',
|
||||||
|
component: ComponentDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'example',
|
||||||
|
label: 'Example',
|
||||||
|
component: ExampleDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -19,11 +19,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import BootstrapDoc from '@/doc/guides/csslayer/BootstrapDoc.vue';
|
import BootstrapDoc from '@/doc/csslayer/BootstrapDoc.vue';
|
||||||
import NormalizeDoc from '@/doc/guides/csslayer/NormalizeDoc.vue';
|
import NormalizeDoc from '@/doc/csslayer/NormalizeDoc.vue';
|
||||||
import ResetDoc from '@/doc/guides/csslayer/ResetDoc.vue';
|
import ResetDoc from '@/doc/csslayer/ResetDoc.vue';
|
||||||
import SpecificityDoc from '@/doc/guides/csslayer/SpecificityDoc.vue';
|
import SpecificityDoc from '@/doc/csslayer/SpecificityDoc.vue';
|
||||||
import TailwindDoc from '@/doc/guides/csslayer/TailwindDoc.vue';
|
import TailwindDoc from '@/doc/csslayer/TailwindDoc.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<Head>
|
||||||
|
<Title>Installation - PrimeVue</Title>
|
||||||
|
<Meta name="description" content="Installation guides for popular development environments." />
|
||||||
|
</Head>
|
||||||
|
<div class="doc">
|
||||||
|
<div class="doc-main">
|
||||||
|
<div class="doc-intro">
|
||||||
|
<h1>Installation</h1>
|
||||||
|
<p>Installation guides for popular development environments.</p>
|
||||||
|
</div>
|
||||||
|
<DocSections :docs="docs" />
|
||||||
|
</div>
|
||||||
|
<DocSectionNav :docs="docs" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GuidesDoc from '@/doc/installation/GuidesDoc.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
docs: [
|
||||||
|
{
|
||||||
|
id: 'guides',
|
||||||
|
label: 'Guides',
|
||||||
|
component: GuidesDoc
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue