Install Preline UI with Nuxt.js using Tailwind CSS

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

Quick Nuxt.js setup

Meta-framework for universal applications.

  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/dist/*.js',  ],  plugins: [      require('preline/plugin'),  ],}
  3. Add the Preline UI JavaScript

    Create preline.client.js file inside plugins directory and add the Preline UI JavaScript into created file.

    // index.jsimport('preline')export default defineNuxtPlugin(() => {})