2. Frameworks
  3. Nuxt.js

Installation

Install Preline UI with Nuxt.js using Tailwind CSS

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

Installation

Please note that the plugin has been tested with the latest version of the framework (v3.8.1). The framework was installed using the standard npx nuxi@latest init <project-name> command.
If you are using your own project structure or a different version, pay attention to the file paths and features of your version!

Quick Nuxt.js setup

The Intuitive Web Framework. If you haven't set up Tailwind CSS yet, check out Nuxt.js Tailwind CSS installation guides.

Preline UI + Nuxt.js

  1. Install Preline UI

    Install preline via npm or yarn. 

    npm 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. Create Preline UI JavaScript loader

    Create the Preline UI JavaScript loader inside the project, e.g. projects_root_directory/plugins/preline.client.ts 

                          
                        import "preline/preline";
                        import { type IStaticMethods } from "preline/preline";
                        declare global {
                          interface Window {
                            HSStaticMethods: IStaticMethods;
                          }
                        }

                        export default defineNuxtPlugin((nuxtApp) => {
                          nuxtApp.hook("page:finish", () => {
                            window.HSStaticMethods.autoInit();
                          });
                        });

  4. Add the Preline UI JavaScript loader

    Include Preline UI JavaScript loader to the nuxt.config.js file. 

                          
                        export default defineNuxtConfig({
                          ...
                          plugins: ["~/plugins/preline.client.ts"],
                        });