From bb49c9fcf171f51efe2c7807c32e231357882e4f Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 20 Jan 2021 11:37:59 +0300 Subject: [PATCH] Update setup docs based on new build --- src/views/setup/Setup.vue | 82 +++++++++++++++++++++++++++------------ 1 file changed, 57 insertions(+), 25 deletions(-) diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue index 84c595a65..454e54501 100755 --- a/src/views/setup/Setup.vue +++ b/src/views/setup/Setup.vue @@ -17,13 +17,13 @@ 
 
-npm install primevue@^3.1.1 --save
+npm install primevue@^3.2.0-rc.1 --save
 npm install primeicons --save
Module Loader
-

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

+

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.

@@ -55,31 +55,60 @@ app.component('Dialog', Dialog);
 
 <Dialog></Dialog>
 
-
+ + +
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 + in your local build instead of using the compiled output. One use case for this approach is optimizing for SSR by removing whitespaces.

+ +
+
+import Dialog from 'primevue/dialog/sfc';
+
+
Script Tag
-

Other alternative is utilizing the components directly within the browser with UMD packages.

+

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

 
-<meta charset="utf-8">
-<title>calendar demo</title>
-<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
-<link href="https://unpkg.com/primevue/resources/primevue.min.css " rel="stylesheet">
-<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
-<script src="https://unpkg.com/vue@next"></script>
-<script src="https://unpkg.com/primevue/calendar/calendar.umd.min.js"></script>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>PrimeVue Demo</title>
+        <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.cs " rel="stylesheet">
+        <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
+        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
 
-<div id="app">
-  <p-calendar></p-calendar>
-</div>
+        <script src="https://unpkg.com/vue@next"></script>
+        <script src="https://unpkg.com/primevue/inputtext"></script>
+    </head>
 
-<script>
-Vue.createApp({
-  components: {
-    'p-calendar': calendar
-  }
-}).mount('#app')
-</script>
+    <body>
+        <div id="app">
+            <p-inputtext v-model="val"></p-inputtext>
+            <h6>{{val}}</h6>
+        </div>
+
+        <script>
+            const {createApp, ref} = Vue;
+
+            const App = {
+                setup() {
+                    const val = ref(null);
+
+                    return {
+                        val
+                    };
+                },
+                components: {
+                    'p-inputtext': primevue.inputtext
+                } 
+            };
+
+            createApp(App).mount("#app");
+        </script>
+    </body>
+</html>
@@ -98,7 +127,7 @@ dependencies: {
Optional
-

Here is the list of components with 3rd party dependencies.

+

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

@@ -206,11 +235,14 @@ app.use(PrimeVue, {ripple: true});
Locale

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

-
Quickstart
-

An example application based on vue-cli is available at github.

+
Quickstart with Vue CLI
+

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

+ +
Quickstart with Vite
+

A start 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 is available as well at github.

+

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.

\ No newline at end of file