1. Frameworks
  2. Nuxt.js

Installation

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

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

  3. Add the Preline UI JavaScript

    Copy Preline UI to the static folder and add following JavaScript code to your nuxt.config.js file. 

    // nuxt.config.jsexport default{  head: {    ...    script: [        {          src: '/vendor/preline/dist/preline.js',          body: true,          defer: true        }    ]  }  ...}