Install Preline UI with Nuxt.js using Tailwind CSS

1. Install Preline UI

   Install Preline using your preferred package manager.

   Terminal

                             
                               npm install preline
                             
                           

   Please note, Preline UI uses Tailwind CSS Forms plugin in all form components. Don't forget to install it, if you haven't done so already: npm install -D @tailwindcss/forms

   The steps below wire up the full set of Preline UI components, including the ones that rely on third-party libraries (Datatable, Datepicker, Range Slider, File Upload). Install those libraries and their TypeScript types now, so the global.d.ts and preline.client.ts steps below have everything they import:

   Terminal

                               
                                 npm install jquery lodash nouislider dropzone datatables.net-dt vanilla-calendar-pro
                                 npm install -D @types/jquery @types/lodash @types/dropzone
                               
                             

   If you don't use Datatable, Datepicker, Range Slider, or File Upload, skip whichever of these your project doesn't need, along with the matching lines in the steps below.

2. Include Preline CSS

   Include Preline in your projects_root_directory/assets/css/main.css file.

   main.css

                             
                               @import "tailwindcss";
   
                               @import "preline/variants.css";
                               @source "../../node_modules/preline/dist/*.js";
   
                               /* Optional Preline UI Datepicker Plugin */
                               /* @import "preline/datepicker-styles-utility.css"; */
   
                               /* Plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "preline/theme.css";
   
                               /* Optional Preline UI Datatable Plugin: DataTables.net renders its own
                                 search/length/paging controls alongside Preline's own; hide the native
                                 ones since they can't be disabled through DataTables options alone. */
                               /*
                               .dt-layout-row:has(.dt-search),
                               .dt-layout-row:has(.dt-length),
                               .dt-layout-row:has(.dt-paging) {
                                 display: none !important;
                               }
                               */
                             
                           

   Check out the Theme docs to learn more about Preline Themes.

3. Add type definitions for Preline

   Create the global.d.ts file in the project root directory, e.g. projects_root_directory/global.d.ts

   global.d.ts

                             
                               import type { JQueryStatic } from "jquery";
                               import type _ from "lodash";
                               import type DataTable from "datatables.net-dt";
                               import type Dropzone from "dropzone";
                               import type { Calendar } from "vanilla-calendar-pro";
                               import type noUiSlider from "nouislider";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   _: typeof _;
                                   $: JQueryStatic;
                                   jQuery: JQueryStatic;
                                   DataTable: typeof DataTable;
                                   Dropzone: typeof Dropzone;
                                   VanillaCalendarPro: typeof Calendar;
                                   noUiSlider: typeof noUiSlider;
                                 }
                               }
   
                               export {};
                             
                           

4. Add the Preline UI JavaScript

   Add the Preline UI JavaScript in your app entry point projects_root_directory/plugins/preline.client.ts

   preline.client.ts

                             
                               // Optional third-party libraries
                               import $ from "jquery";
                               import _ from "lodash";
                               import noUiSlider from "nouislider";
                               import Dropzone from "dropzone";
   
                               export default defineNuxtPlugin(async (nuxtApp) => {
                                 window.$ = $;
                                 window.jQuery = $;
                                 window._ = _;
                                 window.noUiSlider = noUiSlider;
                                 window.Dropzone = Dropzone;
   
                                 const { default: DataTable } = await import("datatables.net-dt");
                                 window.DataTable = DataTable;
   
                                 const { Calendar } = await import("vanilla-calendar-pro");
                                 window.VanillaCalendarPro = Calendar;
   
                                 // Preline UI
                                 nuxtApp.hook("page:finish", async () => {
                                   const { HSStaticMethods } = await import("preline/non-auto");
   
                                   HSStaticMethods.cleanCollection();
                                   HSStaticMethods.autoInit();
                                 });
                               });
                             
                           

Optional Preline UI Styles

                        
                          /* Adds pointer cursor to buttons */
                          @layer base {
                            button:not(:disabled),
                            [role="button"]:not(:disabled) {
                              cursor: pointer;
                            }
                          }

                          /* Defaults hover styles on all devices */
                          @custom-variant hover (&:hover);
                        
                      

Specific guide

Continue with a focused guide for wiring Preline UI JavaScript plugins into this framework.