Setting up PrimeVue Unstyled and Tailwind CSS presets in a Nuxt project.
You may choose to install the @nuxtjs/tailwindcss module or install Tailwind CSS manually; the prerequisite steps are covered by their guides. If you have Nuxt and Tailwind configured successfully, follow the next steps.
PrimeVue is available for download on npm registry. For this setup, we'll also use the primevue-nuxt module.
# Using npm
npm install primevue
npm install --save-dev nuxt-primevue
# Using yarn
yarn add primevue
yarn add --dev nuxt-primevue
# Using pnpm
pnpm add primevue
pnpm add -D nuxt-primevue
In your nuxt-config file, add the nuxt-primevue module and configure PrimeVue to be unstyled.
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
options: {
unstyled: true
},
}
})
Download a release from github, alternatively you may use Preset Builder to dynamically build your release file with the components you need as the pre-build release package contains all the available components. Once the zip is downloaded, extract the contents to a folder of your choice e.g. ./presets and then in your nuxt-config file, configure the importPT property of PrimeVue to the main preset file.
import path from 'path';
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
options: {
unstyled: true
},
importPT: { from: path.resolve(__dirname, './presets/aura/') } //import and apply preset
}
})
export default defineNuxtConfig({
modules: [
'nuxt-primevue'
],
primevue: {
options: {
unstyled: true
},
importPT: { as: 'Aura', from: '~/presets/aura' } //import and apply preset
}
})
The built-in presets utilize an extended color palette based on CSS variables that needs to be defined at tailwind.config.js. In addition, the presets folder is required to be scanned by Tailwind with the content property. If you are using the tailwind module, this can be done in a separate config file or using the nuxt config directly. Visit the overwriting the default configuration documentation for details.
export default {
darkMode: 'class', // This enables dark mode based on the presence of the "dark" class in the HTML tag
content: [
"presets/**/*.{js,vue,ts}" // this is optional if you are using @nuxtjs/tailwindcss
],
theme: {
extend: {
colors: {
primary: 'rgb(var(--primary))',
'primary-inverse': 'rgb(var(--primary-inverse))',
'primary-hover': 'rgb(var(--primary-hover))',
'primary-active-color': 'rgb(var(--primary-active-color))',
'primary-highlight': 'rgb(var(--primary)/var(--primary-highlight-opacity))',
'primary-highlight-inverse': 'rgb(var(--primary-highlight-inverse))',
'primary-highlight-hover': 'rgb(var(--primary)/var(--primary-highlight-hover-opacity))',
'primary-50': 'rgb(var(--primary-50))',
'primary-100': 'rgb(var(--primary-100))',
'primary-200': 'rgb(var(--primary-200))',
'primary-300': 'rgb(var(--primary-300))',
'primary-400': 'rgb(var(--primary-400))',
'primary-500': 'rgb(var(--primary-500))',
'primary-600': 'rgb(var(--primary-600))',
'primary-700': 'rgb(var(--primary-700))',
'primary-800': 'rgb(var(--primary-800))',
'primary-900': 'rgb(var(--primary-900))',
'primary-950': 'rgb(var(--primary-950))',
'surface-0': 'rgb(var(--surface-0))',
'surface-50': 'rgb(var(--surface-50))',
'surface-100': 'rgb(var(--surface-100))',
'surface-200': 'rgb(var(--surface-200))',
'surface-300': 'rgb(var(--surface-300))',
'surface-400': 'rgb(var(--surface-400))',
'surface-500': 'rgb(var(--surface-500))',
'surface-600': 'rgb(var(--surface-600))',
'surface-700': 'rgb(var(--surface-700))',
'surface-800': 'rgb(var(--surface-800))',
'surface-900': 'rgb(var(--surface-900))',
'surface-950': 'rgb(var(--surface-950))'
}
}
}
...
}
Final step is defining the default values for the colors in RGB format, this can be done in a global CSS file in your Nuxt application. See the styling section at Nuxt documentation for more information.
Now, in addition to the primary-[shade] and surface-[shade] colors, we have introduced new variables for more flexibility and customization. These variables include primary, primary-inverse, primary-highlight, and more. This allows you to define primary colors like Noir and customize them according to your needs.
:root {
--primary-50: 236 253 245;
--primary-100: 209 250 229;
--primary-200: 167 243 208;
--primary-300: 110 231 183;
--primary-400: 52 211 153;
--primary-500: 16 185 129;
--primary-600: 5 150 105;
--primary-700: 4 120 87;
--primary-800: 6 95 70;
--primary-900: 4 78 56;
--primary-950: 2 44 34;
--surface-0: 255 255 255;
--surface-50: 250 250 250;
--surface-100: 244 244 245;
--surface-200: 228 228 231;
--surface-300: 212 212 216;
--surface-400: 161 161 170;
--surface-500: 113 113 122;
--surface-600: 82 82 91;
--surface-700: 63 63 70;
--surface-800: 39 39 42;
--surface-900: 24 24 27;
--surface-950: 9 9 11;
--primary: var(--primary-500);
--primary-inverse: var(--surface-0);
--primary-hover: var(--primary-600);
--primary-active-color: var(--primary-600);
--primary-highlight-opacity: 0.1;
--primary-highlight-inverse: var(--primary-700);
--primary-highlight-hover-opacity: 0.2;
}
.dark{
--primary: var(--primary-400);
--primary-inverse: var(--surface-900);
--primary-hover: var(--primary-300);
--primary-active-color: var(--primary-300);
--primary-highlight-opacity: 0.2;
--primary-highlight-inverse: var(--surface-0);
--primary-highlight-hover-opacity: 0.3;
}
.customized-primary {
&:not(.dark){
--primary: var(--primary-950);
--primary-inverse: var(--surface-0);
--primary-hover: var(--primary-800);
--primary-active-color: var(--primary-900);
--primary-highlight-opacity: 1;
--primary-highlight-inverse: var(--surface-0);
--primary-highlight-hover-opacity: 0.8;
}
&.dark{
--primary: var(--primary-50);
--primary-inverse: var(--surface-950);
--primary-hover: var(--primary-100);
--primary-active-color: var(--primary-100);
--primary-highlight-opacity: 0.1;
--primary-highlight-inverse: var(--surface-0);
--primary-highlight-hover-opacity: 0.2;
}
}
Visit the nuxt-unstyled-tailwind project as an example.