├── public
    ├── robots.txt
    └── favicon.ico
├── server
    └── tsconfig.json
├── .DS_Store
├── app.vue
├── .gitignore
├── tsconfig.json
├── assets
    └── css
    │   └── input.css
├── composables
    └── useFlowbite.js
├── nuxt.config.ts
├── package.json
├── LICENSE.md
├── pages
    ├── Dismiss.vue
    ├── Tooltip.vue
    ├── Datepicker.vue
    ├── Popover.vue
    ├── Collapse.vue
    ├── Dropdown.vue
    ├── Input-Counter.vue
    ├── Drawer.vue
    ├── Modal.vue
    ├── index.vue
    ├── Tabs.vue
    ├── Dial.vue
    ├── Carousel.vue
    ├── Accordion.vue
    └── Events.vue
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/tailwind-nuxt-starter/HEAD/.DS_Store


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <NuxtLayout>
3 |     <NuxtPage />
4 |   </NuxtLayout>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/tailwind-nuxt-starter/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/assets/css/input.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 
3 | @import "flowbite/src/themes/default";
4 | @plugin "flowbite/plugin";
5 | @source "../../node_modules/flowbite";
6 | @source "../../node_modules/flowbite-datepicker";
7 | 


--------------------------------------------------------------------------------
/composables/useFlowbite.js:
--------------------------------------------------------------------------------
 1 | // composables/useFlowbite.js
 2 | 
 3 | export function useFlowbite(callback) {
 4 |   if (process.client) {
 5 |     import('flowbite').then((flowbite) => {
 6 |       callback(flowbite);
 7 |     });
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import tailwindcss from "@tailwindcss/vite";
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   css: ['~/assets/css/input.css'],
 5 | 
 6 |   vite: {
 7 |     plugins: [
 8 |       tailwindcss(),
 9 |     ],
10 |   },
11 | 
12 |   compatibilityDate: "2025-02-28",
13 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwind-nuxt-starter",
 3 |   "version": "2.0.0",
 4 |   "description": "A free and open-source starter project to help you get started with the core Flowbite Library components and Nuxt.js",
 5 |   "license": "MIT",
 6 |   "repository": "https://github.com/themesberg/tailwind-nuxt-starter",
 7 |   "homepage": "https://flowbite.com/docs/getting-started/nuxt/",
 8 |   "contributors": [
 9 |     "Zoltán Szőgyényi (https://twitter.com/zoltanszogyenyi)"
10 |   ],
11 |   "author": "Bergside Inc.",
12 |   "type": "module",
13 |   "scripts": {
14 |     "build": "nuxt build",
15 |     "dev": "nuxt dev",
16 |     "generate": "nuxt generate",
17 |     "preview": "nuxt preview",
18 |     "postinstall": "nuxt prepare"
19 |   },
20 |   "dependencies": {
21 |     "@tailwindcss/vite": "^4.0.9",
22 |     "flowbite": "^3.1.2",
23 |     "nuxt": "^3.15.4",
24 |     "tailwindcss": "^4.0.9",
25 |     "vue": "latest",
26 |     "vue-router": "latest"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Bergside Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/pages/Dismiss.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // target element that will be dismissed
 8 |         const $targetEl = document.getElementById('targetElement');
 9 |         // optional trigger element
10 |         const $triggerEl = document.getElementById('triggerElement');
11 |         // options object
12 |         const options = {
13 |         transition: 'transition-opacity',
14 |         duration: 1000,
15 |         timing: 'ease-out',
16 |         // callback functions
17 |         onHide: (context, targetEl) => {
18 |             console.log('element has been dismissed')
19 |             console.log(targetEl)
20 |         }
21 |         };
22 |         if ($targetEl) {
23 |             /*
24 |             * targetEl: required
25 |             * triggerEl: optional
26 |             * options: optional
27 |             */
28 |             const dismiss = new Dismiss($targetEl, $triggerEl, options);
29 |             // programatically hide it
30 |             // dismiss.hide();
31 |         }
32 |     })
33 | 
34 | })
35 | </script>
36 | 
37 | <template>
38 |   <div class="max-w-2xl p-4 mx-auto">
39 |         <button id="triggerElement" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Hide alert</button>
40 | 
41 |         <div id="targetElement" class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert">
42 |         <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
43 |         </div>
44 |     </div>
45 | </template>


--------------------------------------------------------------------------------
/pages/Tooltip.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // set the tooltip content element
 8 |         const $targetEl = document.getElementById('tooltipContent');
 9 |         // set the element that trigger the tooltip using hover or click
10 |         const $triggerEl = document.getElementById('tooltipButton');
11 |         // options with default values
12 |         const options = {
13 |         placement: 'top',
14 |         triggerType: 'hover',
15 |         onHide: () => {
16 |             console.log('tooltip is shown');
17 |         },
18 |         onShow: () => {
19 |             console.log('tooltip is hidden');
20 |         }
21 |         };
22 |         if ($targetEl) {
23 |             /*
24 |             * targetEl: required
25 |             * triggerEl: required
26 |             * options: optional
27 |             */
28 |             const tooltip = new Tooltip($targetEl, $triggerEl, options);
29 |             // show the tooltip
30 |             tooltip.show();
31 |         }
32 |     })
33 | 
34 | })
35 | </script>
36 | 
37 | <template>
38 |   <div class="flex justify-center max-w-2xl p-4 mx-auto pt-26">
39 |         <button id="tooltipButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
40 |         <div id="tooltipContent" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
41 |             Tooltip content
42 |             <div class="tooltip-arrow" data-popper-arrow></div>
43 |         </div>
44 |     </div>
45 | </template>


--------------------------------------------------------------------------------
/pages/Datepicker.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | 
 5 | // initialize components based on data attribute selectors
 6 | onMounted(() => {
 7 | 
 8 |     useFlowbite((flowbite) => {
 9 |         // set the target element of the input field
10 |         const $datepickerEl = document.getElementById('datepicker-custom');
11 | 
12 |         // optional options with default values and callback functions
13 |         const options = {
14 |             defaultDatepickerId: null,
15 |             autohide: false,
16 |             format: 'mm/dd/yyyy',
17 |             maxDate: null,
18 |             minDate: null,
19 |             orientation: 'bottom',
20 |             buttons: false,
21 |             autoSelectToday: false,
22 |             title: null,
23 |             language: 'en',
24 |             rangePicker: false,
25 |             onShow: () => {},
26 |             onHide: () => {},
27 |         };
28 | 
29 |         const instanceOptions = {
30 |         id: 'datepicker-custom-example',
31 |         override: true
32 |         };
33 | 
34 |         const datepicker = new Datepicker($datepickerEl, options, instanceOptions);
35 |     });
36 | 
37 | })
38 | </script>
39 | 
40 | <template>
41 |     
42 |     <div class="relative max-w-sm">
43 |         <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
44 |             <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
45 |             <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
46 |             </svg>
47 |         </div>
48 |         <input id="datepicker-custom" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
49 |     </div>
50 | 
51 | </template>


--------------------------------------------------------------------------------
/pages/Popover.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // set the popover content element
 8 |         const $targetEl = document.getElementById('popoverContent');
 9 |         // set the element that trigger the popover using hover or click
10 |         const $triggerEl = document.getElementById('popoverButton');
11 |         // options with default values
12 |         const options = {
13 |         placement: 'top',
14 |         triggerType: 'hover',
15 |         offset: 10,
16 |         onHide: () => {
17 |             console.log('popover is shown');
18 |         },
19 |         onShow: () => {
20 |             console.log('popover is hidden');
21 |         }
22 |         };
23 |         if ($targetEl) {
24 |             /*
25 |             * targetEl: required
26 |             * triggerEl: required
27 |             * options: optional
28 |             */
29 |             const popover = new Popover($targetEl, $triggerEl, options);
30 |             popover.show();
31 |         }
32 |     })
33 | })
34 | </script>
35 | 
36 | <template>
37 |   <div class="flex justify-center max-w-2xl p-4 mx-auto pt-36">
38 |     <button id="popoverButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
39 |     <div data-popover id="popoverContent" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
40 |         <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
41 |             <h3 class="font-semibold text-gray-900 dark:text-white">Popover title</h3>
42 |         </div>
43 |         <div class="px-3 py-2">
44 |             <p>And here's some amazing content. It's very engaging. Right?</p>
45 |         </div>
46 |         <div data-popper-arrow></div>
47 |     </div>
48 | </div>
49 | </template>


--------------------------------------------------------------------------------
/pages/Collapse.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // set the target element that will be collapsed or expanded (eg. navbar menu)
 8 |         const $targetEl = document.getElementById('targetEl');
 9 |         // optionally set a trigger element (eg. a button, hamburger icon)
10 |         const $triggerEl = document.getElementById('triggerEl');
11 |         // optional options with default values and callback functions
12 |         const options = {
13 |         onCollapse: () => {
14 |             console.log('element has been collapsed')
15 |         },
16 |         onExpand: () => {
17 |             console.log('element has been expanded')
18 |         },
19 |         onToggle: () => {
20 |             console.log('element has been toggled')
21 |         }
22 |         };
23 |         if ($targetEl) {
24 |             /*
25 |             * targetEl: required
26 |             * options: optional
27 |             */
28 |             const collapse = new Collapse($targetEl, $triggerEl, options);
29 |             // show the target element
30 |             collapse.expand();
31 |         }
32 |     })
33 | 
34 | })
35 | </script>
36 | 
37 | <template>
38 |   <div class="max-w-2xl p-4 mx-auto">
39 |         <!-- Trigger element -->
40 |         <button id="triggerEl" aria-expanded="false" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Trigger collapse</button>
41 | 
42 |         <!-- Target element -->
43 |         <div id="targetEl" class="hidden">
44 |         <ul class="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
45 |             <li class="w-full px-4 py-2 border-b border-gray-200 rounded-t-lg dark:border-gray-600">Profile</li>
46 |             <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Settings</li>
47 |             <li class="w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600">Messages</li>
48 |             <li class="w-full px-4 py-2 rounded-b-lg">Download</li>
49 |         </ul>
50 |         </div>
51 | </div>
52 | </template>


--------------------------------------------------------------------------------
/pages/Dropdown.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // set the dropdown menu element
 8 |         const $targetEl = document.getElementById('dropdownMenu');
 9 |         // set the element that trigger the dropdown menu on click
10 |         const $triggerEl = document.getElementById('dropdownButton');
11 |         // options with default values
12 |         const options = {
13 |         placement: 'bottom',
14 |         offsetSkidding: 0,
15 |         offsetDistance: 10,
16 |         onHide: () => {
17 |             console.log('dropdown has been hidden');
18 |         },
19 |         onShow: () => {
20 |             console.log('dropdown has been shown');
21 |         }
22 |         };
23 |         if ($targetEl) {
24 |             /*
25 |             * targetEl: required
26 |             * triggerEl: required
27 |             * options: optional
28 |             */
29 |             const dropdown = new Dropdown($targetEl, $triggerEl, options);
30 |             // show the dropdown
31 |             dropdown.show();
32 |         }
33 |     })
34 | 
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <div class="max-w-2xl p-4 mx-auto">
40 |     <button id="dropdownButton" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg aria-hidden="true" class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
41 |     <!-- Dropdown menu -->
42 |     <div id="dropdownMenu" class="z-10 hidden bg-white divide-y divide-gray-100 rounded shadow w-44 dark:bg-gray-700">
43 |         <ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownButton">
44 |         <li>
45 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
46 |         </li>
47 |         <li>
48 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
49 |         </li>
50 |         <li>
51 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
52 |         </li>
53 |         <li>
54 |             <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
55 |         </li>
56 |         </ul>
57 |     </div>
58 | </div>
59 | </template>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind 4 Nuxt Starter
 2 | 
 3 | If you [follow this guide](https://flowbite.com/docs/getting-started/nuxt-js/) you will learn how to install the latest version 3 of Nuxt with Tailwind CSS v4 and Flowbite and also show you how to use the TypeScript version.
 4 | 
 5 | ## Create a Nuxt project
 6 | 
 7 | Before continuing make sure that you have Node.js and NPM installed on your local machine.
 8 | 
 9 | 1. Create a new Nuxt project by running the following command in your terminal:
10 | 
11 | ```bash
12 | npx nuxi init flowbite-app
13 | cd flowbite-app
14 | ```
15 | 
16 | 2. Install the project dependencies by executing the following command:
17 | 
18 | ```bash
19 | npm install
20 | ```
21 | 
22 | 3. Run the following command to start a local development server on `http://localhost:3000/`:
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | This will make the Nuxt project accessible via the browser.
29 | 
30 | ## Install Tailwind CSS
31 | 
32 | Now that you have locally set up a Nuxt project we will proceed by installing Tailwind CSS.
33 | 
34 | 1. Require and install the NuxtTailwind module by installing it via NPM:
35 | 
36 | ```bash
37 | npm install tailwindcss @tailwindcss/vite --save
38 | ```
39 | 
40 | 2. Configure the Nuxt configuration file to include the Tailwind module:
41 | 
42 | ```javascript
43 | import tailwindcss from "@tailwindcss/vite";
44 | 
45 | export default defineNuxtConfig({
46 |   devtools: { enabled: true },
47 |   css: ['~/assets/css/input.css'], // you'll have to create this file
48 |   vite: {
49 |     plugins: [
50 |       tailwindcss(),
51 |     ],
52 |   },
53 | });
54 | ```
55 | 
56 | 3. Create a new CSS file `./assets/css/input.css` and import Tailwind:
57 | 
58 | ```css
59 | @import "tailwindcss";
60 | ```
61 | 
62 | Tailwind CSS is now configured in your project and if you add the utility classes anywhere in your Vue template files the CSS will be generated and included.
63 | 
64 | ## Install Flowbite
65 | 
66 | After installing both Nuxt and Tailwind CSS inside your project we can proceed by installing Flowbite.
67 | 
68 | 1. Install Flowbite as a dependency using NPM by running the following command:
69 | 
70 | ```bash
71 | npm install flowbite --save
72 | ```
73 | 
74 | 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:
75 | 
76 | ```css
77 | @import "flowbite/src/themes/default";
78 | ```
79 | 
80 | 3. Import the Flowbite plugin file in your CSS:
81 | 
82 | ```css
83 | @plugin "flowbite/plugin";
84 | ```
85 | 
86 | 4. Configure the source files of Flowbite in your CSS:
87 | 
88 | ```css
89 | @source "../../node_modules/flowbite";
90 | ```
91 | 
92 | ## Flowbite Components
93 | 
94 | Now that you have successfully installed Nuxt, Tailwind CSS and Flowbite you can start importing and using components from the open-source library of [Flowbite](https://flowbite.com) such as modals, navbars, tables, dropdowns, and more.
95 | 


--------------------------------------------------------------------------------
/pages/Input-Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // set the target element of the input field
 8 |         const $targetEl = document.getElementById('counter-input-example');
 9 | 
10 |         // optionally set the increment and decrement elements
11 |         const $incrementEl = document.getElementById('increment-button');
12 | 
13 |         const $decrementEl = document.getElementById('decrement-button');
14 | 
15 |         // optional options with default values and callback functions
16 |         const options = {
17 |             minValue: 0,
18 |             maxValue: null, // infinite
19 |             onIncrement: () => {
20 |                 console.log('input field value has been incremented');
21 |             },
22 |             onDecrement: () => {
23 |                 console.log('input field value has been decremented');
24 |             }
25 |         };
26 | 
27 |         const instanceOptions = {
28 |             id: 'counter-input-example',
29 |             override: true
30 |         };
31 | 
32 |         if ($targetEl) {
33 |             const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
34 |         }
35 |     })
36 | 
37 | })
38 | </script>
39 | 
40 | <template>
41 |   <form class="max-w-xs mx-auto">
42 |         <label for="counter-input-example" class="block mb-1 text-sm font-medium text-gray-900 dark:text-white">Choose quantity:</label>
43 |         <div class="relative flex items-center">
44 |             <button type="button" id="decrement-button" class="flex-shrink-0 bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 inline-flex items-center justify-center border border-gray-300 rounded-md h-5 w-5 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
45 |                 <svg class="w-2.5 h-2.5 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
46 |                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
47 |                 </svg>
48 |             </button>
49 |             <input type="text" id="counter-input-example" class="flex-shrink-0 text-gray-900 dark:text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center" placeholder="" value="12" required>
50 |             <button type="button" id="increment-button" class="flex-shrink-0 bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 inline-flex items-center justify-center border border-gray-300 rounded-md h-5 w-5 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
51 |                 <svg class="w-2.5 h-2.5 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
52 |                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
53 |                 </svg>
54 |             </button>
55 |         </div>
56 |     </form>
57 | </template>


--------------------------------------------------------------------------------
/pages/Drawer.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         initFlowbite();
 8 |     });
 9 | 
10 | });
11 | </script>
12 | 
13 | <template>
14 |   
15 | 
16 | <!-- drawer init and toggle -->
17 | <div class="text-center">
18 |    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" type="button" data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example">
19 |    Show drawer
20 |    </button>
21 | </div>
22 | 
23 | <!-- drawer component -->
24 | <div id="drawer-example" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
25 |    <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"><svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
26 |     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
27 |   </svg>Info</h5>
28 |    <button type="button" data-drawer-hide="drawer-example" aria-controls="drawer-example" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
29 |       <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
30 |          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
31 |       </svg>
32 |       <span class="sr-only">Close menu</span>
33 |    </button>
34 |       
35 |    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Supercharge your hiring by taking advantage of our <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.</p>
36 |    <div class="grid grid-cols-2 gap-4">
37 |       <a href="#" class="px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more</a>
38 |       <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get access <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
39 |     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
40 |   </svg></a>
41 |    </div>
42 | </div>
43 | 
44 | </template>


--------------------------------------------------------------------------------
/pages/Modal.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 | useFlowbite((flowbite) => {
 7 |     initFlowbite();
 8 | });
 9 | 
10 | });
11 | </script>
12 | 
13 | <template>
14 |     <div>
15 |         
16 | 
17 | <!-- Modal toggle -->
18 | <button data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
19 |   Toggle modal
20 | </button>
21 | 
22 | <!-- Main modal -->
23 | <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
24 |     <div class="relative p-4 w-full max-w-2xl max-h-full">
25 |         <!-- Modal content -->
26 |         <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
27 |             <!-- Modal header -->
28 |             <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
29 |                 <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
30 |                     Terms of Service
31 |                 </h3>
32 |                 <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
33 |                     <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
34 |                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
35 |                     </svg>
36 |                     <span class="sr-only">Close modal</span>
37 |                 </button>
38 |             </div>
39 |             <!-- Modal body -->
40 |             <div class="p-4 md:p-5 space-y-4">
41 |                 <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
42 |                     With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
43 |                 </p>
44 |                 <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
45 |                     The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
46 |                 </p>
47 |             </div>
48 |             <!-- Modal footer -->
49 |             <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
50 |                 <button data-modal-hide="default-modal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
51 |                 <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</button>
52 |             </div>
53 |         </div>
54 |     </div>
55 | </div>
56 | 
57 |     </div>
58 | </template>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex items-center justify-center h-screen bg-gray-50">
 3 |           <div>
 4 |             <h1 class="mb-6 text-4xl">Flowbite + Nuxt.js + Tailwind CSS Starter</h1>
 5 |             <div class="w-auto mb-4 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
 6 |                 <NuxtLink to="/" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Home</NuxtLink>
 7 |                 <NuxtLink to="/events" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Data attribute events</NuxtLink>
 8 |                 <NuxtLink to="/accordion" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Accordion</NuxtLink>
 9 |                 <NuxtLink to="/carousel" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Carousel</NuxtLink>
10 |                 <NuxtLink to="/modal" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Modal</NuxtLink>
11 |                 <NuxtLink to="/collapse" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Collapse</NuxtLink>
12 |                 <NuxtLink to="/dial" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Speed Dial</NuxtLink>
13 |                 <NuxtLink to="/dismiss" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Dismiss</NuxtLink>
14 |                 <NuxtLink to="/drawer" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Drawer</NuxtLink>
15 |                 <NuxtLink to="/dropdown" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Dropdown</NuxtLink>
16 |                 <NuxtLink to="/popover" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Popover</NuxtLink>
17 |                 <NuxtLink to="/tabs" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Tabs</NuxtLink>
18 |                 <NuxtLink to="/tooltip" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Tooltip</NuxtLink>
19 |                 <NuxtLink to="/input-counter" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Input Counter</NuxtLink>
20 |                 <NuxtLink to="/datepicker" class="block w-full px-4 py-2 border-b border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-500 dark:focus:text-white">Datepicker</NuxtLink>
21 |             </div>
22 |             <p class="mb-8">Learn more about <NuxtLink to="https://flowbite.com/docs/getting-started/nuxt-js/" class="text-blue-600 hover:underline">Flowbite + Nuxt.js here</NuxtLink>.</p>
23 |           </div>
24 |       </div>
25 |   </template>
26 |   


--------------------------------------------------------------------------------
/pages/Tabs.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         const tabsElement = document.getElementById('tabs-example');
 8 | 
 9 |         // create an array of objects with the id, trigger element (eg. button), and the content element
10 |         const tabElements = [
11 |             {
12 |                 id: 'profile',
13 |                 triggerEl: document.querySelector('#profile-tab-example'),
14 |                 targetEl: document.querySelector('#profile-example')
15 |             },
16 |             {
17 |                 id: 'dashboard',
18 |                 triggerEl: document.querySelector('#dashboard-tab-example'),
19 |                 targetEl: document.querySelector('#dashboard-example')
20 |             },
21 |             {
22 |                 id: 'settings',
23 |                 triggerEl: document.querySelector('#settings-tab-example'),
24 |                 targetEl: document.querySelector('#settings-example')
25 |             },
26 |             {
27 |                 id: 'contacts',
28 |                 triggerEl: document.querySelector('#contacts-tab-example'),
29 |                 targetEl: document.querySelector('#contacts-example')
30 |             }
31 |         ];
32 |         // options with default values
33 |         const options = {
34 |             defaultTabId: 'settings',
35 |             activeClasses: 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',
36 |             inactiveClasses: 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
37 |             onShow: () => {
38 |                 console.log('tab is shown');
39 |             }
40 |         };
41 |         if (document.querySelector('#profile-tab-example')) {
42 |             /*
43 |             * tabElements: array of tab objects
44 |             * options: optional
45 |             */
46 |             const tabs = new Tabs(tabsElement, tabElements, options);
47 |             // open tab item based on id
48 |             tabs.show('contacts');
49 |         }
50 |     })
51 | 
52 | })
53 | </script>
54 | 
55 | <template>
56 |   <div class="max-w-2xl p-4 mx-auto">
57 |         <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
58 |             <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400" id="tabs-example" role="tablist">
59 |                 <li class="mr-2" role="presentation">
60 |                     <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab-example" type="button" role="tab" aria-controls="profile-example" aria-selected="false">Profile</button>
61 |                 </li>
62 |                 <li class="mr-2" role="presentation">
63 |                     <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="dashboard-tab-example" type="button" role="tab" aria-controls="dashboard-example" aria-selected="false">Dashboard</button>
64 |                 </li>
65 |                 <li class="mr-2" role="presentation">
66 |                     <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">Settings</button>
67 |                 </li>
68 |                 <li role="presentation">
69 |                     <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="contacts-tab-example" type="button" role="tab" aria-controls="contacts-example" aria-selected="false">Contacts</button>
70 |                 </li>
71 |             </ul>
72 |         </div>
73 |         <div id="tabContentExample">
74 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="profile-example" role="tabpanel" aria-labelledby="profile-tab-example">
75 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
76 |             </div>
77 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="dashboard-example" role="tabpanel" aria-labelledby="dashboard-tab-example">
78 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
79 |             </div>
80 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="settings-example" role="tabpanel" aria-labelledby="settings-tab-example">
81 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
82 |             </div>
83 |             <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="contacts-example" role="tabpanel" aria-labelledby="contacts-tab-example">
84 |                 <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
85 |             </div>
86 |         </div>
87 |     </div>
88 | </template>


--------------------------------------------------------------------------------
/pages/Dial.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import { useFlowbite } from '~/composables/useFlowbite';
 4 | onMounted(() => {
 5 | 
 6 |     useFlowbite((flowbite) => {
 7 |         // parent element wrapping the speed dial
 8 |         const $parentEl = document.getElementById('dialParent')
 9 |         // the trigger element that can be clicked or hovered
10 |         const $triggerEl = document.getElementById('dialButton');
11 |         // the content wrapping element of menu items or buttons
12 |         const $targetEl = document.getElementById('dialContent');
13 |         // options with default values
14 |         const options = {
15 |         triggerType: 'hover',
16 |         onHide: () => {
17 |             console.log('speed dial is shown');
18 |         },
19 |         onShow: () => {
20 |             console.log('speed dial is hidden');
21 |         },
22 |         onToggle: () => {
23 |             console.log('speed dial is toggled')
24 |         }
25 |         };
26 |         if ($parentEl) {
27 |             /*
28 |             * parentEl: required
29 |             * targetEl: required
30 |             * triggerEl: required
31 |             * options: optional
32 |             */
33 |             const dial = new Dial($parentEl, $triggerEl, $targetEl, options);
34 |             // show the speed dial
35 |             dial.show();
36 |         }
37 |     })
38 | 
39 | })
40 | </script>
41 | 
42 | <template>
43 |   <div class="max-w-2xl p-4 mx-auto">
44 |         <div id="dialParent" class="fixed right-6 bottom-6 group">
45 |             <div id="dialContent" class="flex flex-col items-center hidden mb-4 space-y-2">
46 |                 <button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
47 |                     <svg aria-hidden="true" class="w-6 h-6 -ml-px " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path></svg>
48 |                     <span class="sr-only">Share</span>
49 |                 </button>
50 |                 <div id="tooltip-share" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
51 |                     Share
52 |                     <div class="tooltip-arrow" data-popper-arrow></div>
53 |                 </div>
54 |                 <button type="button" data-tooltip-target="tooltip-print" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
55 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z" clip-rule="evenodd"></path></svg>
56 |                     <span class="sr-only">Print</span>
57 |                 </button>
58 |                 <div id="tooltip-print" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
59 |                     Print
60 |                     <div class="tooltip-arrow" data-popper-arrow></div>
61 |                 </div>
62 |                 <button type="button" data-tooltip-target="tooltip-download" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
63 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-5L9 4H4zm7 5a1 1 0 00-2 0v1.586l-.293-.293a.999.999 0 10-1.414 1.414l2 2a.999.999 0 001.414 0l2-2a.999.999 0 10-1.414-1.414l-.293.293V9z" fill-rule="evenodd"></path></svg>
64 |                     <span class="sr-only">Download</span>
65 |                 </button>
66 |                 <div id="tooltip-download" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
67 |                     Download
68 |                     <div class="tooltip-arrow" data-popper-arrow></div>
69 |                 </div>
70 |                 <button type="button" data-tooltip-target="tooltip-copy" data-tooltip-placement="left" class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 dark:hover:text-white shadow-sm dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
71 |                     <svg aria-hidden="true" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"></path><path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"></path></svg>
72 |                     <span class="sr-only">Copy</span>
73 |                 </button>
74 |                 <div id="tooltip-copy" role="tooltip" class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
75 |                     Copy
76 |                     <div class="tooltip-arrow" data-popper-arrow></div>
77 |                 </div>
78 |             </div>
79 |             <button type="button" id="dialButton" aria-controls="speed-dial-menu-default" aria-expanded="false" class="flex items-center justify-center text-white bg-blue-700 rounded-full w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
80 |                 <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
81 |                 <span class="sr-only">Open actions menu</span>
82 |             </button>
83 |         </div>
84 |     </div>
85 | </template>


--------------------------------------------------------------------------------
/pages/Carousel.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { useFlowbite } from '~/composables/useFlowbite';
  4 | onMounted(() => {
  5 | 
  6 |     useFlowbite((flowbite) => {
  7 |         const carouselElement = document.getElementById('carousel-example');
  8 | 
  9 |         const items = [
 10 |             {
 11 |                 position: 0,
 12 |                 el: document.getElementById('carousel-item-1')
 13 |             },
 14 |             {
 15 |                 position: 1,
 16 |                 el: document.getElementById('carousel-item-2')
 17 |             },
 18 |             {
 19 |                 position: 2,
 20 |                 el: document.getElementById('carousel-item-3')
 21 |             },
 22 |             {
 23 |                 position: 3,
 24 |                 el: document.getElementById('carousel-item-4')
 25 |             },
 26 |         ];
 27 |         const options = {
 28 |             defaultPosition: 1,
 29 |             interval: 3000,
 30 |             
 31 |             indicators: {
 32 |                 activeClasses: 'bg-white dark:bg-gray-800',
 33 |                 inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
 34 |                 items: [
 35 |                     {
 36 |                         position: 0,
 37 |                         el: document.getElementById('carousel-indicator-1')
 38 |                     },
 39 |                     {
 40 |                         position: 1,
 41 |                         el: document.getElementById('carousel-indicator-2')
 42 |                     },
 43 |                     {
 44 |                         position: 2,
 45 |                         el: document.getElementById('carousel-indicator-3')
 46 |                     },
 47 |                     {
 48 |                         position: 3,
 49 |                         el: document.getElementById('carousel-indicator-4')
 50 |                     },
 51 |                 ]
 52 |             },
 53 |             
 54 |             // callback functions
 55 |             onNext: () => {
 56 |                 console.log('next slider item is shown');
 57 |             },
 58 |             onPrev: ( ) => {
 59 |                 console.log('previous slider item is shown');
 60 |             },
 61 |             onChange: ( ) => {
 62 |                 console.log('new slider item has been shown');
 63 |             }
 64 |         };
 65 |         if (document.getElementById('carousel-item-1')) {
 66 |             const carousel = new Carousel(carouselElement, items, options);
 67 |             carousel.cycle()
 68 |             // set event listeners for prev and next buttons
 69 |             const prevButton = document.getElementById('data-carousel-prev');
 70 |             const nextButton = document.getElementById('data-carousel-next');
 71 |             prevButton.addEventListener('click', () => {
 72 |                 carousel.prev();
 73 |             });
 74 |             nextButton.addEventListener('click', () => {
 75 |                 carousel.next();
 76 |             });
 77 |         }
 78 |     })
 79 | 
 80 | })
 81 | </script>
 82 | 
 83 | <template>
 84 |   <div id="carousel-example" class="max-w-2xl p-4 mx-auto">
 85 |         <div class="relative">
 86 |             <!-- Carousel wrapper -->
 87 |             <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96">
 88 |                  <!-- Item 1 -->
 89 |                 <div id="carousel-item-1" class="hidden duration-700 ease-in-out">
 90 |                     <span class="absolute text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
 91 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
 92 |                 </div>
 93 |                 <!-- Item 2 -->
 94 |                 <div id="carousel-item-2" class="hidden duration-700 ease-in-out">
 95 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
 96 |                 </div>
 97 |                 <!-- Item 3 -->
 98 |                 <div id="carousel-item-3" class="hidden duration-700 ease-in-out">
 99 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
100 |                 </div>
101 |                 <!-- Item 4 -->
102 |                 <div id="carousel-item-4" class="hidden duration-700 ease-in-out">
103 |                     <img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
104 |                 </div>
105 |             </div>
106 |             <!-- Slider indicators -->
107 |             <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
108 |                 <button id="carousel-indicator-1" type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"></button>
109 |                 <button id="carousel-indicator-2" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
110 |                 <button id="carousel-indicator-3" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
111 |                 <button id="carousel-indicator-4" type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"></button>
112 |             </div>
113 |             <!-- Slider controls -->
114 |             <button id="data-carousel-prev" type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
115 |                 <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
116 |                     <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
117 |                     <span class="hidden">Previous</span>
118 |                 </span>
119 |             </button>
120 |             <button id="data-carousel-next" type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
121 |                 <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
122 |                     <svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
123 |                     <span class="hidden">Next</span>
124 |                 </span>
125 |             </button>
126 |         </div>
127 |     </div>
128 | </template>


--------------------------------------------------------------------------------
/pages/Accordion.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { useFlowbite } from '~/composables/useFlowbite';
  4 | 
  5 | onMounted(() => {
  6 | 
  7 |   useFlowbite((flowbite) => {
  8 |     const accordionElement = document.getElementById('accordion-example');
  9 |     // create an array of objects with the id, trigger element (eg. button), and the content element
 10 |     const accordionItems = [
 11 |             {
 12 |                 id: 'accordion-example-heading-1',
 13 |                 triggerEl: document.querySelector('#accordion-example-heading-1'),
 14 |                 targetEl: document.querySelector('#accordion-example-body-1'),
 15 |                 active: true
 16 |             },
 17 |             {
 18 |                 id: 'accordion-example-heading-2',
 19 |                 triggerEl: document.querySelector('#accordion-example-heading-2'),
 20 |                 targetEl: document.querySelector('#accordion-example-body-2'),
 21 |                 active: false
 22 |             },
 23 |             {
 24 |                 id: 'accordion-example-heading-3',
 25 |                 triggerEl: document.querySelector('#accordion-example-heading-3'),
 26 |                 targetEl: document.querySelector('#accordion-example-body-3'),
 27 |                 active: false
 28 |             }
 29 |         ];
 30 |         // options with default values
 31 |         const options = {
 32 |             alwaysOpen: true,
 33 |             activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',
 34 |             inactiveClasses: 'text-gray-500 dark:text-gray-400',
 35 |             onOpen: (item) => {
 36 |                 console.log('accordion item has been shown');
 37 |                 console.log(item);
 38 |             },
 39 |             onClose: (item) => {
 40 |                 console.log('accordion item has been hidden');
 41 |                 console.log(item);
 42 |             },
 43 |             onToggle: (item) => {
 44 |                 console.log('accordion item has been toggled');
 45 |                 console.log(item);
 46 |             },
 47 |         };
 48 |         if (document.querySelector('#accordion-example-heading-1')) {
 49 |             /*
 50 |             * accordionItems: array of accordion item objects
 51 |             * options: optional
 52 |             */
 53 |             const accordion = new Accordion(accordionElement, accordionItems, options);
 54 |             // open accordion item based on id
 55 |             accordion.open('accordion-example-heading-2');
 56 |         }
 57 | 
 58 |   });
 59 | 
 60 | })
 61 | </script>
 62 | 
 63 | <template>
 64 |   <div id="accordion-example" class="max-w-2xl p-4 mx-auto">
 65 |         <h2 id="accordion-example-heading-1">
 66 |           <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="true" aria-controls="accordion-example-body-1">
 67 |             <span>What is Flowbite?</span>
 68 |             <svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 69 |           </button>
 70 |         </h2>
 71 |         <div id="accordion-example-body-1" class="hidden" aria-labelledby="accordion-example-heading-1">
 72 |           <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700 dark:bg-gray-900">
 73 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
 74 |             <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
 75 |           </div>
 76 |         </div>
 77 |         <h2 id="accordion-example-heading-2">
 78 |           <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="false" aria-controls="accordion-example-body-2">
 79 |             <span>Is there a Figma file available?</span>
 80 |             <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 81 |           </button>
 82 |         </h2>
 83 |         <div id="accordion-example-body-2" class="hidden" aria-labelledby="accordion-example-heading-2">
 84 |           <div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
 85 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
 86 |             <p class="text-gray-500 dark:text-gray-400">Check out the <a href="https://flowbite.com/figma/" class="text-blue-600 dark:text-blue-500 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
 87 |           </div>
 88 |         </div>
 89 |         <h2 id="accordion-example-heading-3">
 90 |           <button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="false" aria-controls="accordion-example-body-3">
 91 |             <span>What are the differences between Flowbite and Tailwind UI?</span>
 92 |             <svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 93 |           </button>
 94 |         </h2>
 95 |         <div id="accordion-example-body-3" class="hidden" aria-labelledby="accordion-example-heading-3">
 96 |           <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
 97 |             <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
 98 |             <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
 99 |             <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
100 |             <ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
101 |               <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
102 |               <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
103 |             </ul>
104 |           </div>
105 |         </div>
106 |     </div>
107 | </template>


--------------------------------------------------------------------------------
/pages/Events.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { onMounted } from 'vue'
  3 | import { useFlowbite } from '~/composables/useFlowbite';
  4 | 
  5 | // initialize components based on data attribute selectors
  6 | onMounted(() => {
  7 | 
  8 |     useFlowbite((flowbite) => {
  9 |         initFlowbite();
 10 |     });
 11 | 
 12 | })
 13 | </script>
 14 | 
 15 | <template>
 16 | 
 17 |     <div class="relative max-w-sm">
 18 |     <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
 19 |         <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
 20 |         <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>
 21 |         </svg>
 22 |     </div>
 23 |     <input datepicker id="default-datepicker" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
 24 |     </div>
 25 | 
 26 |     <div>
 27 |         <div class="flex justify-center m-5">
 28 |             <button id="defaultModalButton" data-tooltip-target="tooltip-default" data-modal-toggle="defaultModal" data-modal-target="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
 29 |             Create product
 30 |             </button>
 31 |             <div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
 32 |                 Tooltip content
 33 |                 <div class="tooltip-arrow" data-popper-arrow></div>
 34 |             </div>
 35 |         </div>
 36 | 
 37 |         <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
 38 |             <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
 39 |                 <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
 40 |                     <div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
 41 |                         <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
 42 |                             Add Product
 43 |                         </h3>
 44 |                         <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
 45 |                             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
 46 |                             <span class="sr-only">Close modal</span>
 47 |                         </button>
 48 |                     </div>
 49 |                     <form action="#">
 50 |                         <div class="grid gap-4 mb-4 sm:grid-cols-2">
 51 |                             <div>
 52 |                                 <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
 53 |                                 <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Type product name" required="">
 54 |                             </div>
 55 |                             <div>
 56 |                                 <label for="brand" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Brand</label>
 57 |                                 <input type="text" name="brand" id="brand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Product brand" required="">
 58 |                             </div>
 59 |                             <div>
 60 |                                 <label for="price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Price</label>
 61 |                                 <input type="number" name="price" id="price" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="$2999" required="">
 62 |                             </div>
 63 |                             <div>
 64 |                                 <label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
 65 |                                 <select id="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
 66 |                                     <option selected="">Select category</option>
 67 |                                     <option value="TV">TV/Monitors</option>
 68 |                                     <option value="PC">PC</option>
 69 |                                     <option value="GA">Gaming/Console</option>
 70 |                                     <option value="PH">Phones</option>
 71 |                                 </select>
 72 |                             </div>
 73 |                             <div class="sm:col-span-2">
 74 |                                 <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
 75 |                                 <textarea id="description" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Write product description here"></textarea>                    
 76 |                             </div>
 77 |                         </div>
 78 |                         <button type="submit" class="text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
 79 |                             <svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
 80 |                             Add new product
 81 |                         </button>
 82 |                     </form>
 83 |                 </div>
 84 |             </div>
 85 |         </div>
 86 | 
 87 |         <!-- drawer init and toggle -->
 88 |         <div class="text-center">
 89 |             <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" type="button" data-drawer-target="drawer-example" data-drawer-show="drawer-example" aria-controls="drawer-example">
 90 |             Show drawer
 91 |             </button>
 92 |             </div>
 93 | 
 94 |             <!-- drawer component -->
 95 |             <div id="drawer-example" class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
 96 |             <h5 id="drawer-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"><svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
 97 |                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
 98 |             </svg>Info</h5>
 99 |             <button type="button" data-drawer-hide="drawer-example" aria-controls="drawer-example" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
100 |                 <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
101 |                     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
102 |                 </svg>
103 |                 <span class="sr-only">Close menu</span>
104 |             </button>
105 |                 
106 |             <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Supercharge your hiring by taking advantage of our <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.</p>
107 |             <div class="grid grid-cols-2 gap-4">
108 |                 <a href="#" class="px-4 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more</a>
109 |                 <a href="#" class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Get access <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
110 |                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
111 |             </svg></a>
112 |             </div>
113 |         </div>
114 | 
115 |     </div>
116 | </template>


--------------------------------------------------------------------------------