jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
flowbite-vue/docs/.vitepress/dist/assets/pages_getting-started.md.0e48f016.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

44 lines
11 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.3f630664.js";const g=JSON.parse('{"title":"Flowbite Vue - Quickstart","description":"","frontmatter":{},"headers":[],"relativePath":"pages/getting-started.md","filePath":"pages/getting-started.md"}'),p={name:"pages/getting-started.md"},o=l(`<h1 id="flowbite-vue-quickstart" tabindex="-1">Flowbite Vue - Quickstart <a class="header-anchor" href="#flowbite-vue-quickstart" aria-label="Permalink to &quot;Flowbite Vue - Quickstart&quot;">​</a></h1><p>Get started with Flowbite by including it into your project using NPM</p><p>Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.</p><h2 id="require-via-npm" tabindex="-1">Require via NPM <a class="header-anchor" href="#require-via-npm" aria-label="Permalink to &quot;Require via NPM&quot;">​</a></h2><p>Make sure that you have <a href="https://nodejs.org/en/" target="_blank" rel="noreferrer">Node.js</a> and <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer">Tailwind CSS</a> installed.</p><ol><li>Install <code>flowbite</code> and <code>flowbite-vue</code> as a dependency using NPM by running the following command:</li></ol><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">npm</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">i</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">flowbite</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">flowbite-vue</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">npm</span><span style="color:#24292E;"> </span><span style="color:#032F62;">i</span><span style="color:#24292E;"> </span><span style="color:#032F62;">flowbite</span><span style="color:#24292E;"> </span><span style="color:#032F62;">flowbite-vue</span></span></code></pre></div><ol start="2"><li>Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:</li></ol><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#79B8FF;">module</span><span style="color:#E1E4E8;">.</span><span style="color:#79B8FF;">exports</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;"> content: [</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}&#39;</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;node_modules/flowbite/**/*.{js,jsx,ts,tsx}&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;"> ],</span></span>
<span class="line"><span style="color:#E1E4E8;"> plugins: [</span></span>
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">require</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;flowbite/plugin&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;"> ],</span></span>
<span class="line"><span style="color:#E1E4E8;"> theme: {}</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#005CC5;">module</span><span style="color:#24292E;">.</span><span style="color:#005CC5;">exports</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;"> content: [</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}&#39;</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;node_modules/flowbite/**/*.{js,jsx,ts,tsx}&#39;</span></span>
<span class="line"><span style="color:#24292E;"> ],</span></span>
<span class="line"><span style="color:#24292E;"> plugins: [</span></span>
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">require</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;flowbite/plugin&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;"> ],</span></span>
<span class="line"><span style="color:#24292E;"> theme: {}</span></span>
<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><ol start="3"><li>Now you can use <code>flowbite-vue</code> anywhere in your project and build awesome interfaces:</li></ol><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Click me&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">placement</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;top&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;Item #1&lt;/</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;Item #2&lt;/</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;Item #3&lt;/</span><span style="color:#85E89D;">fwb-list-group-item</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-list-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-dropdown</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbDropdown, FwbListGroup, FwbListGroupItem } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Click me&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">placement</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;top&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;Item #1&lt;/</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;Item #2&lt;/</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;Item #3&lt;/</span><span style="color:#22863A;">fwb-list-group-item</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-list-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-dropdown</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbDropdown, FwbListGroup, FwbListGroupItem } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,11),t=[o];function e(c,r,i,E,y,d){return a(),n("div",null,t)}const b=s(p,[["render",e]]);export{g as __pageData,b as default};
Reference in New Issue View Git Blame Copy Permalink