From d5344092f876407dd9ddcbbf8955db8597e73ec8 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 25 Oct 2021 13:23:42 +0300 Subject: [PATCH] Doc update --- src/views/setup/Setup.vue | 161 +++++++++++++++++++------------------- 1 file changed, 81 insertions(+), 80 deletions(-) diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue index 034d4b3c3..5cfa205f0 100755 --- a/src/views/setup/Setup.vue +++ b/src/views/setup/Setup.vue @@ -6,13 +6,9 @@

Setup

PrimeVue is a rich set of open source native components for Vue.

-
Video Tutorial
-

Watch the video tutorial that goes through the steps documented on this guide.

-
- -
+

Module Loader

+

This is the recommended way if your application uses Vue CLI, Vite or has a webpack based build with vue-loader configured.

-
Download

PrimeVue is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.


@@ -21,10 +17,7 @@ npm install primeicons --save
-
Module Loader
-

This is the recommended way if your application uses Vue CLI, Vite or has a webpack based build with vue-loader configured.

- -

Begin with installing PrimeVue. This command only sets up the core configuration like locale and does not register any component.

+

Next step is setting up PrimeVue configuration.


 import {createApp} from 'vue';
 import App from './App.vue';
@@ -49,22 +42,16 @@ app.component('Dialog', Dialog);
-

Finally you'll be able to utilize the component in your application.

+

Finally you'll be able to utilize the component in your application. See the Styles section to apply styling.


 <Dialog></Dialog>
-
Prop Cases
-

Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.

-

-<Dialog :showHeader="false"></Dialog>
-
-<!-- can be written as -->
-
-<Dialog :show-header="false"></Dialog>
-
-
+

Watch the video tutorial that goes through these steps.

+
+ +
Single File Components

SFC files are available in the npm distribution and if you'd like to use SFCs directly, add /sfc as a suffix when referencing an import path. This will instruct your bundler to process the *.vue files @@ -75,7 +62,7 @@ import Dialog from 'primevue/dialog/sfc'; -

Script Tag
+

Script Tag

Other alternative is utilizing the components directly within the browser with the iife build. Note that PrimeVue does not provide a umd build.
-
Dependencies
-

Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Quill for Editor.

-

In addition, components require PrimeIcons library for icons.

- -
Mandatory
-

-dependencies: {
-    "vue": "^3.0.0",
-    "primeicons": "^4.0.0"
-}
-
-
- -
Optional
-

Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.

-
- - - - - - - - - - - - - - - - - - - - - -
ComponentDependency
ChartsCharts.js 3.3.2+
EditorQuill.js 1.3.3+
PrimeFlexDataView
-
- -
Styles
+

Styles

The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.

@@ -214,10 +159,14 @@ primevue/resources/themes/rhea/theme.css -
Nuxt Integration
+
PrimeFlex
+

PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly + recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the PrimeFlex homepage for the more information.

+ +

Nuxt Integration

Nuxt 3 is currently in beta and an official module is planned after the final release. At the moment, PrimeVue can easily be used with Nuxt 3 using a custom plugin.

- nuxt.config.js +
nuxt.config.js

Open the nuxt configuration file and add the css dependencies.


 import { defineNuxtConfig } from 'nuxt3'
@@ -232,7 +181,7 @@ export default defineNuxtConfig({
- primevue.js +
primevue.js

Create a file like primevue.js under the plugins directory for the configuration.


@@ -248,9 +197,57 @@ export default defineNuxtPlugin((nuxtApp) => {
-
PrimeFlex
-

PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly - recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the PrimeFlex section for the installation.

+

Configuration

+
Dependencies
+

PrimeVue components are not wrappers and implemented natively with the Vue APIs. There are some exceptions having 3rd party dependencies such as Quill for Editor.

+

In addition, components require PrimeIcons library for icons.

+ +
Mandatory
+

+dependencies: {
+    "vue": "^3.0.0",
+    "primeicons": "^4.0.0"
+}
+
+
+ +
Optional
+

Here is the list of components with 3rd party dependencies. Documentation of each component has a dependencies section as well.

+
+ + + + + + + + + + + + + + + + + + + + + +
ComponentDependency
ChartsCharts.js 3.3.2+
EditorQuill.js 1.3.3+
PrimeFlexDataView
+
+ +
Prop Cases
+

Component prop names are described as camel case throughout the documentation however camel-case is also fully supported. Events on the other hand should always be camel-case.

+

+<Dialog :showHeader="false"></Dialog>
+
+<!-- can be written as -->
+
+<Dialog :show-header="false"></Dialog>
+
+
Ripple

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at @@ -302,14 +299,6 @@ app.use(PrimeVue, {

Locale

PrimeVue provides a Locale API to support i18n and l7n, visit the Locale documentation for more information.

-
Quickstart with Vue CLI
-

An example application based on Vue CLI is available at github.

- -
Quickstart with Vite
-

A starter application is also provided for Vite users.

- -
Typescript
-

Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample typescript-primevue application with Vue CLI is available as at github.

Browser Support
@@ -358,6 +347,18 @@ app.use(PrimeVue, {
+ +

Samples

+
Typescript
+

Typescript is fully supported as type definition files are provided in the npm package of PrimeVue. A sample typescript-primevue application with Vue CLI is available as at github.

+ +
Quickstart with Vue CLI
+

An example application based on Vue CLI is available at github.

+ +
Quickstart with Vite
+

A starter application is also provided for Vite users.

+ +