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/src/plugins/datepicker/styles.css"; */
   
                               /* Third-party plugins */
                               /* @plugin "@tailwindcss/forms"; */
   
                               /* Preline Themes */
                               @import "./themes/theme.css";
                             
                           

   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

                             
                               import type { IStaticMethods } from "preline/dist";
   
                               declare global {
                                 interface Window {
                                   // Optional third-party libraries
                                   _;
                                   $: typeof import("jquery");
                                   jQuery: typeof import("jquery");
                                   DataTable;
                                   Dropzone;
                                   VanillaCalendarPro;
   
                                   // Preline UI
                                   HSStaticMethods: IStaticMethods;
                                 }
                               }
   
                               export {};
                             
                           

4. Add the Preline UI JavaScript

   Import and attach the required external libraries in project_root_directory/src/main.ts, then load Preline UI.

   main.ts

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

5. Reinitialize with vue-router

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

   index.ts

                             
                               import { createRouter, createWebHistory } from "vue-router";
   
                               import HomeView from "../views/HomeView.vue";
   
                               const router = createRouter({
                                 ...
                                 routes: [
                                   {
                                     path: "/",
                                     name: "home",
                                     component: HomeView,
                                   },
                                   ...
                                 ],
                               });
   
                               router.afterEach(async (to, from, failure) => {
                                 if (!failure) setTimeout(() => window.HSStaticMethods.autoInit(), 100);
                               });
   
                               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

                             
                               onMounted(() => {
                                 setTimeout(() => window.HSStaticMethods.autoInit(), 100)
                               });
                             
                           

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.