Skip to content

Commit

Permalink
Fixed #1660 - Nuxt docs
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Oct 25, 2021
1 parent 380f61d commit 6dfdd7a
Showing 1 changed file with 34 additions and 0 deletions.
34 changes: 34 additions & 0 deletions src/views/setup/Setup.vue
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,40 @@ primevue/resources/themes/luna-green/theme.css
primevue/resources/themes/luna-pink/theme.css
primevue/resources/themes/rhea/theme.css

</code></pre>

<h5>Nuxt Integration</h5>
<p>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.</p>

<b>nuxt.config.js</b>
<p>Open the nuxt configuration file and add the css dependencies.</p>
<pre v-code.script><code>
import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
css: [
'primevue/resources/themes/saga-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css'
]
})

</code></pre>

<b>primevue.js</b>
<p>Create a file like <i>primevue.js</i> under the plugins directory for the configuration.</p>

<pre v-code.script><code>
import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import Button from "primevue/button";

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, {ripple: true});
nuxtApp.vueApp.component('Button', Button);
//other components that you need
});

</code></pre>

<h5>PrimeFlex</h5>
Expand Down

0 comments on commit 6dfdd7a

Please sign in to comment.