{"id":35551,"date":"2024-10-31T17:13:43","date_gmt":"2024-10-31T16:13:43","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=35551"},"modified":"2024-10-31T17:13:47","modified_gmt":"2024-10-31T16:13:47","slug":"exploring-flyonui-with-vue-js-a-fresh-and-evolving-library","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/","title":{"rendered":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library"},"content":{"rendered":"\n<p>As someone who has relied on <strong>Vuetify<\/strong> for most of my Vue.js projects, I&#8217;m always on the lookout for new libraries that can streamline development and keep designs modern. Recently, a new UI library called <strong>FlyonUI<\/strong> was released, and I decided to give it a spin. FlyonUI is a Tailwind CSS Components Library. To my surprise, it turned out to be not only lightweight but also incredibly easy to set up and customize. In this post, I\u2019ll walk you through the basics of integrating FlyonUI with Vue.js.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-i-m-interested-about-flyonui\">Why I\u2019m Interested About FlyonUI<\/h2>\n\n\n\n<p>Released just a few weeks ago, <strong>FlyonUI<\/strong> promises a fresh approach to Vue UI development. FlyonUI is an <strong>open-source<\/strong> (I love open-source projects) Tailwind CSS Components Library with\u00a0semantic classes\u00a0and\u00a0powerful JS plugins. It\u2019s designed to be intuitive, flexible and to have universal framework compatibility (Vuejs, React, Angular, &#8230;). I like their website and the documentation seems very complete, not even mentioning the fact that there is already more than 78 available components and 800 examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prerequisites\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A basic understanding of Vue.js<\/li>\n\n\n\n<li><strong>Node.js<\/strong> and <strong>npm<\/strong> installed<\/li>\n\n\n\n<li>Vue.js running application set up with Tailwind CSS (<a href=\"https:\/\/tailwindcss.com\/docs\/guides\/vite#vue\">https:\/\/tailwindcss.com\/docs\/guides\/vite#vue<\/a>)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-i-install-flyonui\">I. Install FlyonUI<\/h2>\n\n\n\n<p>I&#8217;m going to use the application I created for my previous blog, which you can find here: <a href=\"https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/\">https:\/\/www.dbi-services.com\/blog\/vue-creating-an-awesome-parallax-effect-with-swiper\/<\/a>. To add FlyonUI, open your terminal in the project\u2019s root folder and run:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install flyon-ui\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ii-configure-flyonui-in-your-vue-app\">II. Configure FlyonUI in Your Vue App<\/h2>\n\n\n\n<p>Now that FlyonUI is installed, let\u2019s import it to make its components available across the app. Open <code>tailwind.config.js<\/code> and edit the file with the following code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/** @type {import(&#039;tailwindcss&#039;).Config} *\/\nexport default {\n  content: &#x5B;\n    &quot;.\/index.html&quot;,\n    &quot;.\/src\/**\/*.{vue,js,ts,jsx,tsx}&quot;,\n    &quot;.\/node_modules\/flyonui\/dist\/js\/*.js&quot;,\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: &#x5B;\n    require(&#039;flyonui&#039;),\n    require(&#039;flyonui\/plugin&#039;)\n  ],\n}\n<\/pre><\/div>\n\n\n<p>Open <code>main.ts<\/code> and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import \"flyonui\/flyonui\";<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-iii-add-a-reinitialization-helper\">III. Add a reinitialization helper\u00a0<\/h2>\n\n\n\n<p>Add code in your route file (.<code>\/src\/router\/index.ts<\/code>) to reinitialize components each time the page is refreshed.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { createRouter, createWebHistory } from &#039;vue-router&#039;\nimport HomeView from &#039;..\/views\/HomeView.vue&#039;\n\nimport { type IStaticMethods } from &quot;flyonui\/flyonui&quot;;\ndeclare global {\n  interface Window {\n    HSStaticMethods: IStaticMethods;\n  }\n}\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: &#x5B;\n    {\n      path: &#039;\/&#039;,\n      name: &#039;home&#039;,\n      component: HomeView\n    },\n    {\n      path: &#039;\/about&#039;,\n      name: &#039;about&#039;,\n      \/\/ route level code-splitting\n      \/\/ this generates a separate chunk (About.&#x5B;hash].js) for this route\n      \/\/ which is lazy-loaded when the route is visited.\n      component: () =&gt; import(&#039;..\/views\/AboutView.vue&#039;)\n    }\n  ]\n})\n\nrouter.afterEach((to, from, failure) =&gt; {\n  if (!failure) {\n    setTimeout(() =&gt; {\n      window.HSStaticMethods.autoInit();\n    }, 100)\n  }\n});\n\nexport default router\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-iv-using-flyonui-components\">IV. Using FlyonUI Components<\/h2>\n\n\n\n<p>FlyonUI components are simple and straightforward, so let\u2019s jump into using a few popular ones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-1-button\">Example 1: Button<\/h3>\n\n\n\n<p>Now you can use FlyonUI components throughout your Vue application. Here\u2019s an example of using a FlyonUI responsive button:<\/p>\n\n\n\n<p>&lt;button class=&#8221;btn btn-primary max-sm:btn-sm lg:btn-lg&#8221;&gt;Responsive&lt;\/button&gt;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png\" alt=\"\" class=\"wp-image-35568\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-300x300.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-150x150.png 150w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-768x767.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90.png 1274w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-2-add-a-card-component\">Example 2: Add a card component<\/h3>\n\n\n\n<p>We\u2019ll make it simple and place the card structure below the title of our swiper slide. You can add this code to your component:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n        &lt;div class=&quot;card group hover:shadow sm:max-w-sm&quot;&gt;\n          &lt;figure&gt;\n            &lt;img\n              src=&quot;https:\/\/cdn.flyonui.com\/fy-assets\/components\/card\/image-8.png&quot;\n              alt=&quot;Shoes&quot;\n              class=&quot;transition-transform duration-500 group-hover:scale-110&quot;\n            \/&gt;\n          &lt;\/figure&gt;\n          &lt;div class=&quot;card-body&quot;&gt;\n            &lt;h5 class=&quot;card-title mb-2.5&quot;&gt;Card title&lt;\/h5&gt;\n            &lt;p class=&quot;mb-6&quot;&gt;\n              Nike Air Max is a popular line of athletic shoes that feature\n              Nike&#039;s signature Air cushioning technology in the sole.\n            &lt;\/p&gt;\n            &lt;div class=&quot;card-actions&quot;&gt;\n              &lt;button class=&quot;btn btn-primary&quot;&gt;Buy Now&lt;\/button&gt;\n              &lt;button class=&quot;btn btn-secondary btn-soft&quot;&gt;Add to cart&lt;\/button&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1016\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91-1024x1016.png\" alt=\"\" class=\"wp-image-35570\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91-1024x1016.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91-300x298.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91-150x150.png 150w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91-768x762.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-91.png 1278w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-example-3-use-radio-buttons-to-control-css-theme\">Example 3: Use radio buttons to control CSS theme<\/h3>\n\n\n\n<p>FlyonUI offers a range of pre-built themes that make it easy to customize the look and feel of your app. Each theme provides a cohesive color scheme applied across all FlyonUI components. To use a theme, simply add its name to your <code>tailwind.config.js<\/code>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n\/** @type {import(&#039;tailwindcss&#039;).Config} *\/\nexport default {\n  content: &#x5B;\n    &quot;.\/index.html&quot;,\n    &quot;.\/src\/**\/*.{vue,js,ts,jsx,tsx}&quot;,\n    &quot;.\/node_modules\/flyonui\/dist\/js\/*.js&quot;,\n  ],\n  theme: {\n    extend: {},\n  },\n  flyonui: {\n    themes: &#x5B;&quot;light&quot;, &quot;dark&quot;, &quot;gourmet&quot;, &quot;corporate&quot;, &quot;luxury&quot;, &quot;soft&quot;]\n  },\n  plugins: &#x5B;\n    require(&#039;flyonui&#039;),\n    require(&#039;flyonui\/plugin&#039;)\n  ],\n}\n<\/pre><\/div>\n\n\n<p>Now let&#8217;s add the radio buttons onto our slide and verify that the theme of our card is changing:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n        &lt;div class=&quot;join join-horizontal pb-3&quot;&gt;\n          &lt;input\n            type=&quot;radio&quot;\n            name=&quot;theme-buttons&quot;\n            class=&quot;btn theme-controller join-item&quot;\n            aria-label=&quot;Default&quot;\n            value=&quot;default&quot;\n            checked\n          \/&gt;\n          &lt;input\n            type=&quot;radio&quot;\n            name=&quot;theme-buttons&quot;\n            class=&quot;btn theme-controller join-item&quot;\n            aria-label=&quot;Corporate&quot;\n            value=&quot;corporate&quot;\n          \/&gt;\n          &lt;input\n            type=&quot;radio&quot;\n            name=&quot;theme-buttons&quot;\n            class=&quot;btn theme-controller join-item&quot;\n            aria-label=&quot;Gourmet&quot;\n            value=&quot;gourmet&quot;\n          \/&gt;\n        &lt;\/div&gt;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1020\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92-1024x1020.png\" alt=\"\" class=\"wp-image-35574\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92-1024x1020.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92-300x300.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92-150x150.png 150w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92-768x765.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-92.png 1275w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Well, without big surprise, this is working as expected, simple and easy to use. I like how the Gourmet theme is even applying rounded class to our buttons.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-v-advanced-features\">V. Advanced Features<\/h2>\n\n\n\n<p>FlyonUI also offers advanced components, such as tables, charts, and timeline, to build complex interfaces quickly. Refer to the FlyonUI documentation for detailed customization options, methods, and event handling for each component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>FlyonUI seems like an excellent library for Vue.js developers looking to create modern, responsive, and interactive UIs without a significant performance hit. In this guide, we\u2019ve covered the basics of integrating FlyonUI into your Vue project and using several key components. <\/p>\n\n\n\n<p>Still, FlyonUI is a fresh and evolving library, and it&#8217;s clear that the team is still working to expand its capabilities. As you may notice on the official website, some sections are marked as &#8220;coming soon.&#8221; This means there&#8217;s more to look forward to as the library grows and introduces new features. So, stay tuned for updates, enjoy exploring the current components, a big thanks to the developers and have fun testing out FlyonUI!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As someone who has relied on Vuetify for most of my Vue.js projects, I&#8217;m always on the lookout for new libraries that can streamline development and keep designs modern. Recently, a new UI library called FlyonUI was released, and I decided to give it a spin. FlyonUI is a Tailwind CSS Components Library. To my [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3029],"tags":[1095,3452,3454,3034,3035],"type_dbi":[3455,3453,3039,3038],"class_list":["post-35551","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-flyonui","tag-tailwind","tag-vue","tag-vuejs","type-css","type-flyonui","type-vue","type-vuejs"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Exploring FlyonUI with Vue.js: A Fresh and Evolving Library - dbi Blog<\/title>\n<meta name=\"description\" content=\"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let&#039;s explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library\" \/>\n<meta property=\"og:description\" content=\"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let&#039;s explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-31T16:13:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-31T16:13:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joan Frey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joan Frey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\"},\"author\":{\"name\":\"Joan Frey\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"headline\":\"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library\",\"datePublished\":\"2024-10-31T16:13:43+00:00\",\"dateModified\":\"2024-10-31T16:13:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\"},\"wordCount\":649,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png\",\"keywords\":[\"CSS\",\"FlyonUI\",\"tailwind\",\"vue\",\"vuejs\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\",\"name\":\"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png\",\"datePublished\":\"2024-10-31T16:13:43+00:00\",\"dateModified\":\"2024-10-31T16:13:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\"},\"description\":\"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let's explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90.png\",\"contentUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90.png\",\"width\":1274,\"height\":1273},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06\",\"name\":\"Joan Frey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"caption\":\"Joan Frey\"},\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library - dbi Blog","description":"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let's explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/","og_locale":"en_US","og_type":"article","og_title":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library","og_description":"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let's explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.","og_url":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/","og_site_name":"dbi Blog","article_published_time":"2024-10-31T16:13:43+00:00","article_modified_time":"2024-10-31T16:13:47+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png","type":"image\/png"}],"author":"Joan Frey","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joan Frey","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/"},"author":{"name":"Joan Frey","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"headline":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library","datePublished":"2024-10-31T16:13:43+00:00","dateModified":"2024-10-31T16:13:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/"},"wordCount":649,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png","keywords":["CSS","FlyonUI","tailwind","vue","vuejs"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/","url":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/","name":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90-1024x1024.png","datePublished":"2024-10-31T16:13:43+00:00","dateModified":"2024-10-31T16:13:47+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"description":"Discover FlyonUI, a fresh and evolving library for Vue.js developers. Let's explore the integration of FlyonUI, highlighting its simplicity, powerful components, and easy customization.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/10\/image-90.png","width":1274,"height":1273},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/exploring-flyonui-with-vue-js-a-fresh-and-evolving-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Exploring FlyonUI with Vue.js: A Fresh and Evolving Library"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06","name":"Joan Frey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","caption":"Joan Frey"},"url":"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=35551"}],"version-history":[{"count":14,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35551\/revisions"}],"predecessor-version":[{"id":35600,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35551\/revisions\/35600"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=35551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=35551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=35551"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=35551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}