Install Preline UI with Vue.js using Tailwind CSS

1. Install Preline UI

   Install preline via npm or yarn.

   // Terminal or Shellnpm install preline // or yarn add preline

2. Configure Preline UI JavaScript paths

   Add the path to Preline UI JavaScript files in your tailwind.config.js file.

   // tailwind.config.jsmodule.exports = {  content: [      './node_modules/preline/preline.js',  ],  plugins: [      require('preline/plugin'),  ],}

3. Add the Preline UI JavaScript

   Add the Preline UI JavaScript in your app entry point projects_root_directory/src/main.ts|js

   import "preline/preline";

4. Add a reinitialization helper (vue-router)

   Add code that reinitializes the components every time the page is refreshed to your "route" projects_root_directory/src/router/index.ts|js

                         
                           import { createRouter, createWebHistory } from 'vue-router'
   
                           import { type IStaticMethods } from "preline/preline";
                           declare global {
                             interface Window {
                               HSStaticMethods: IStaticMethods;
                             }
                           }
                           
                           ...
   
                           const router = createRouter({
                             ...
                           });
   
   
                           router.afterEach((to, from, failure) => {
                             if (!failure) {
                               setTimeout(() => {
                                 window.HSStaticMethods.autoInit();
                               }, 100)
                             }
                           });
   
                           export default router;
                         
                       

5. Add a reinitialization helper (without router)

   Add code that reinitializes the components every time when app is mounted projects_root_directory/src/App.vue

                         
                           <script setup>
                             import { onMounted } from 'vue';
   
                             import { type IStaticMethods } from "preline/preline";
                             declare global {
                               interface Window {
                                 HSStaticMethods: IStaticMethods;
                               }
                             }
   
                             onMounted(() => {
                               setTimeout(() => {
                                 window.HSStaticMethods.autoInit();
                               }, 100)
                             });
                           </script>
   
                           ...
                         
                       

Community Workarounds

Check out this section for community-shared tips and tricks. It's a spot for finding those handy hacks and solutions that enhance your experience with Preline UI.