themesberg / themesberg/flowbite

Import Flowbite's Javascript library using a Nuxt plugin in tge Nuxt's Integration Guide.

Open
#1,087 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

Following nuxt's integration guide (https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes) to include flowbites's javascript file we have this example:

// composables/useFlowbite.js

export function useFlowbite(callback) {
  if (process.client) {
    import('flowbite').then((flowbite) => {
      callback(flowbite);
    });
  }
}

I'll suggest replace that code with this approach:

// plugins/flowbite.client.ts
import { useFlowbite } from '~/composables/useFlowbite';
import { initFlowbite } from "flowbite";

export default defineNuxtPlugin(() => {
    useFlowbite(() => {
        initFlowbite();
    })
})

This will load the javascript library even if the user enters for the first time to a SSR page.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Nuxt integration guide at https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes and compare its current composable example with the proposed client plugin approach. Check the documented snippets and verify that the guide explains loading Flowbite JavaScript when a user first enters an SSR page; done when the integration instructions are consistent and the first-load behavior is clear.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nuxtjs, typescript
Domain
documentation, web-dev
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.