Add guide for CDN, menu reorg
Cagatay Civici
parent
438eae57b5
commit
d27c3bd5b2
|
|
@ -9,16 +9,8 @@
|
|||
"to": "/introduction"
|
||||
},
|
||||
{
|
||||
"name": "Vite Setup",
|
||||
"to": "/vite"
|
||||
},
|
||||
{
|
||||
"name": "Nuxt Setup",
|
||||
"to": "/nuxt"
|
||||
},
|
||||
{
|
||||
"name": "Configuration",
|
||||
"to": "/configuration"
|
||||
"name": "Installation",
|
||||
"to": "/installation"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"icon": "pi pi-compass",
|
||||
|
|
@ -536,10 +560,6 @@
|
|||
"name": "Accessibility",
|
||||
"to": "/guides/accessibility"
|
||||
},
|
||||
{
|
||||
"name": "CSS Layer",
|
||||
"to": "/guides/csslayer"
|
||||
},
|
||||
{
|
||||
"name": "PrimeTV",
|
||||
"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>
|
||||
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
|
||||
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>
|
||||
<DocSectionCode :code="code4" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code5" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
<DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
<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,
|
||||
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
|
||||
for more information.
|
||||
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
|
||||
information.
|
||||
</p>
|
||||
<DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import BootstrapDoc from '@/doc/guides/csslayer/BootstrapDoc.vue';
|
||||
import NormalizeDoc from '@/doc/guides/csslayer/NormalizeDoc.vue';
|
||||
import ResetDoc from '@/doc/guides/csslayer/ResetDoc.vue';
|
||||
import SpecificityDoc from '@/doc/guides/csslayer/SpecificityDoc.vue';
|
||||
import TailwindDoc from '@/doc/guides/csslayer/TailwindDoc.vue';
|
||||
import BootstrapDoc from '@/doc/csslayer/BootstrapDoc.vue';
|
||||
import NormalizeDoc from '@/doc/csslayer/NormalizeDoc.vue';
|
||||
import ResetDoc from '@/doc/csslayer/ResetDoc.vue';
|
||||
import SpecificityDoc from '@/doc/csslayer/SpecificityDoc.vue';
|
||||
import TailwindDoc from '@/doc/csslayer/TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
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