diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue index 30c802b17..edebdc992 100644 --- a/src/views/setup/Setup.vue +++ b/src/views/setup/Setup.vue @@ -16,8 +16,9 @@ npm install primevue --save npm install primeicons --save -

Import

-

Path of each component is available at the "import" section of a component documentation.

+

Module Loader

+

This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured. + Import the components as .vue files for seamless integration within your project where path of each component is available at the "import" section of a component documentation.

//import {ComponentName} from 'primevue/{componentname}'; @@ -25,15 +26,41 @@ npm install primeicons --save import {Dialog} from 'primevue/dialog'; -

Register

In the next step, register the component with the tag name you'd like to use.

Vue.component('Dialog', Dialog); +

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

+ +<Dialog></Dialog> + + +

Script Tag

+

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

+ +<meta charset="utf-8"> +<title>calendar demo</title> +<script src="https://unpkg.com/vue"></script> +<script src="https://unpkg.com/primevue/components/calendar/calendar.umd.js"></script> + +<div id="app"> + <p-calendar></p-calendar> +</div> + +<script> +new Vue({ + components: { + 'p-calendar': calendar + } +}).$mount('#app') +</script> + + +

Dependencies

-

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

+

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.

@@ -67,7 +94,7 @@ dependencies: { PrimeFlex - DataView and MegaMenu components. + DataView @@ -78,9 +105,9 @@ dependencies: { may import them to your main application component.

-primevue/resources/themes/nova-light/theme.css -primevue/resources/primevue.min.css -primeicons/primeicons.css +primevue/resources/themes/nova-light/theme.css //theme +primevue/resources/primevue.min.css //shared css +primeicons/primeicons.css //icons

Quickstart