1. Getting Started
  2. Frameworks
  3. Vue.js


Install Preline UI with Vue.js using Tailwind CSS

Setting up Preline UI in a Vue.js project using Tailwind CSS.


Please note that the plugin has been tested with the latest version of the framework (v3.3.4). The framework was installed using the standard npm create vue@latest command.
If you are using your own project structure, be mindful of file paths!

Quick Vue.js setup

The Progressive JavaScript Framework. If you haven't set up Tailwind CSS yet, check out Vue Tailwind CSS installation guides.

Preline UI + Vue
  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'
                            const router = createRouter({
                            router.afterEach((to, from, failure) => {
                              if (!failure) {
                                setTimeout(() => {
                                }, 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';
                              onMounted(() => {
                                setTimeout(() => {
                                }, 100)