Install Preline UI with Vue.js using Tailwind CSS

Install Preline UI

Install preline via npm or yarn.

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

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'),  ],}

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";

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'
                        
                        ...

                        const router = createRouter({
                          ...
                        });


                        router.afterEach((to, from, failure) => {
                          if (!failure) {
                            setTimeout(() => {
                              HSStaticMethods.autoInit();
                            }, 100)
                          }
                        });

                        export default router;
                      
                    

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';

                          onMounted(() => {
                            setTimeout(() => {
                              HSStaticMethods.autoInit();
                            }, 100)
                          });
                        </script>

                        ...