How setup PrimeVue with Astro

[amibel]

Hi,

I don't understand how to setup Astro (https://astro.build/) to use last PrimeVue's version.
has anyone ever configured it?

Thank you,

Amibel

[5kyn3t]

Hi
Hi do not know whether it is the recommended way, but here is how I got it running:

1. Install primevue & primeicons

Code: Select all

 npm install primevue primeicons --save

2. in your astro.config.mjs add an _app.ts entrypoint to the vue integrations

Code: Select all

export default defineConfig({
....
  integrations: [ vue({
		appEntrypoint: "/src/_app.ts",
		reactivityTransform: true
	})]
});

2. create a /src/_app.ts file and import some components (source)

Code: Select all

import type { App } from "vue";
import Button from "primevue/button"
import Menu from "primevue/menu"
import PrimeVue from "primevue/config"
import { RouterLink } from "vue-router";

const components = {
  Button,
  Menu,
  RouterLink
}
export default (app: App) => {
  app.use(PrimeVue)
  for (const [key, value] of Object.entries(components)) {
    app.component(key, value)
  }
 
}

2. Import the CSS files ( I did that in my Layout.astro file)

Code: Select all

import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primevue/resources/themes/lara-light-teal/theme.css';

3. Import the Prime-Component in you vue component

Code: Select all

import Button from 'primevue/button';

4. now you should be able to use it

Code: Select all

 <Button label="Click me" />

[bahadirsofuoglu]

Hi
Hi do not know whether it is the recommended way, but here is how I got it running:

1. Install primevue & primeicons

Code: Select all

 npm install primevue primeicons --save

2. in your astro.config.mjs add an _app.ts entrypoint to the vue integrations

Code: Select all

export default defineConfig({
....
  integrations: [ vue({
		appEntrypoint: "/src/_app.ts",
		reactivityTransform: true
	})]
});

2. create a /src/_app.ts file and import some components (source)

Code: Select all

import type { App } from "vue";
import Button from "primevue/button"
import Menu from "primevue/menu"
import PrimeVue from "primevue/config"
import { RouterLink } from "vue-router";

const components = {
  Button,
  Menu,
  RouterLink
}
export default (app: App) => {
  app.use(PrimeVue)
  for (const [key, value] of Object.entries(components)) {
    app.component(key, value)
  }
 
}

2. Import the CSS files ( I did that in my Layout.astro file)

Code: Select all

import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';
import 'primevue/resources/themes/lara-light-teal/theme.css';

3. Import the Prime-Component in you vue component

Code: Select all

import Button from 'primevue/button';

4. now you should be able to use it

Code: Select all

 <Button label="Click me" />

Hi,
I'm planning to create a sample repo for using PrimeVue with Astro. I will also benefit from this answer. If there are deficiencies in the repo, I would be very happy if you contribute. Thank you very much.