Install Preline UI with Vue.js using Tailwind CSS

1. Install Preline UI

   Install preline with your preferred package manager.

   Terminal

                             
                               npm install preline
                             
                           

   Preline UI uses the Tailwind CSS Forms plugin across form components. If you have not added it yet, install it with npm install -D @tailwindcss/forms.

2. Include Preline CSS

   Import Preline into project_root_directory/src/assets/main.css.

   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;
                               }
                               */
                             
                           

   See the Theme docs to learn more about Preline Themes.

3. Add type definitions for Preline

   Create a global.d.ts file for the shared window typings, for example project_root_directory/src/global.d.ts.

   global.d.ts

                             
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   _;
                                   $: typeof import("jquery");
                                   jQuery: typeof import("jquery");
                                   DataTable;
                                   Dropzone;
                                   noUiSlider;
                                   VanillaCalendarPro;
                                 }
                               }
   
                               export {};
                             
                           

4. Add the Preline UI JavaScript

   Import and attach the required external libraries in project_root_directory/src/main.ts. Preline UI itself is loaded in the next step, when it's actually needed.

   main.ts

                             
                               ...
   
                               // Optional third-party libraries
                               import $ from "jquery";
                               import _ from "lodash";
                               import noUiSlider from "nouislider";
                               import "datatables.net-dt";
                               import "dropzone/dist/dropzone-min.js";
                               import { Calendar as VanillaCalendarPro } from "vanilla-calendar-pro";
   
                               window._ = _;
                               window.$ = $;
                               window.jQuery = $;
                               window.DataTable = $.fn.dataTable;
                               window.noUiSlider = noUiSlider;
                               window.VanillaCalendarPro = VanillaCalendarPro;
   
                               ...
   
                               app.mount("#app");
                             
                           

5. Reinitialize with vue-router

   Re-run Preline UI initialization after route changes in project_root_directory/src/router/index.ts.

   index.ts

                             
                               import { nextTick } from "vue";
                               import { createRouter, createWebHistory } from "vue-router";
                               import { HSStaticMethods } from "preline/non-auto";
   
                               import HomeView from "../views/HomeView.vue";
   
                               const router = createRouter({
                                 ...
                                 routes: [
                                   {
                                     path: "/",
                                     name: "home",
                                     component: HomeView,
                                   },
                                   ...
                                 ],
                               });
   
                               router.afterEach(async (to, from, failure) => {
                                 if (failure) return;
   
                                 await nextTick();
                                 HSStaticMethods.cleanCollection();
                                 HSStaticMethods.autoInit();
                               });
   
                               export default router;
                             
                           

6. Reinitialize without router

   Re-run Preline UI initialization when the app mounts in project_root_directory/src/App.vue.

   App.vue

                             
                               import { nextTick, onMounted } from "vue";
                               import { HSStaticMethods } from "preline/non-auto";
   
                               onMounted(async () => {
                                 await nextTick();
                                 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.