jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
8963a831478c93d042e13c94c8f59e56194acba2
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 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