{"id":12236,"date":"2022-09-01T15:07:18","date_gmt":"2022-09-01T12:07:18","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=12236"},"modified":"2022-09-01T15:07:21","modified_gmt":"2022-09-01T12:07:21","slug":"vue-tailwind","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/","title":{"rendered":"Introducing Vue Tailwind Stack for Flatlogic Platform"},"content":{"rendered":"<p>We are happy to announce that the <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/02\/how_to_create_an_app_on_vue-compressed-600x600.png\"  data-excerpt=\"Vue.js is a front-end framework often used in web applications of small and medium scale but perfectly valid for large-scale projects, too. In this article we&#039;re explaining how to create a Vue app by hand and what other routes you can take if you need a Vue application.\" href=\"https:\/\/flatlogic.com\/blog\/how-to-create-a-vue-application\/\">Flatlogic Platform<\/a> now supports the new stack &#8211;&nbsp; Vue Tailwind. It took a long time, and thanks to customer feedback, we&#8217;ve finally made it!<\/p><h2 class=\"wp-block-heading\">What&#8217;s new<\/h2><p>Clean, rapid, and minimized stack made with Vue JS 3.0 and Tailwind CSS 3. We&#8217;ve added new colors, typography, and some minor UI details.<\/p><figure class=\"wp-block-image\"><img decoding=\"async\" data-src=\"https:\/\/lh5.googleusercontent.com\/6vpAR0dJvdrT36NPz7btr-EDmYw7LE5-WPIWsglxH5du3DLB4H9nhSB9SxVsRqR1HFICFOUXx60lBv9nycySdyo5WESsLRmtn2fneFZGmlT787fuEdA41aBUY7xjAK1em8Gr1zV1YUQHRWHM7RTeNb1uyy4mNb-CEGEHIFQIDvxtIJyv3q_4ZKWE2Q\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><p>Incredibly fast template. Thanks to the Vite builder, the project is built in seconds. Comfortable state handling thanks to the lightweight and intuitive Pinia library.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"510\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-1024x510.png\" alt=\"\" class=\"wp-image-12269 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-1024x510.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-600x299.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-768x383.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-1536x765.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/09\/Screenshot-2022-09-01-at-12.15.25-9-2048x1020.png 2048w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/510;\" data-original-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>The main libraries under the hood:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a> v. 3<\/li><li><a href=\"https:\/\/vuejs.org\/\">VueJS<\/a> v. 3.0<\/li><li><a href=\"https:\/\/vitejs.dev\/\">Vite<\/a> v. 2.9.12<\/li><li><a href=\"https:\/\/vuex.vuejs.org\/\">Vuex<\/a> v. 4.0.2<\/li><li><a href=\"https:\/\/pinia.vuejs.org\/\">Pinia<\/a> v. 2.0.13<\/li><li><a href=\"https:\/\/www.npmjs.com\/package\/@kyvg\/vue3-notification\">kyvg\/vue3-notification<\/a> v. 2.3.5<\/li><\/ul><h2 class=\"wp-block-heading\">About Flatlogic Platform<\/h2><p>Flatlogic help software engineers and companies start web application fast. Flatlogic generated web application code in different stacks (Vue, React, Angular, Node.js, Laravle) in minutes based on the database schema. You can create DB schema either using our internal UI tool or by importing SQL scheme files.<\/p><p>The resulting app will have the following features out of a box:<\/p><ul class=\"wp-block-list\"><li>Preconfigured authorization and authenticating;<\/li><li>Tables and forms;<\/li><li>Responsive UI of the app;<\/li><li><a href='https:\/\/flatlogic.com\/crud-app'>CRUD<\/a> functions;<\/li><li>Full access to the front-end, and back-end code;<\/li><li>Docker for deploying to other platforms;<\/li><li>Auto-generated API for each entity documented in Swagger.<\/li><\/ul><h2 class=\"wp-block-heading\">Summing Up<\/h2><p>We have spent a lot of time and effort on improving our Platform. It is a pleasure for us to create something new for our customers and always be in touch with you. Don&#8217;t waste time, check out our new stack <a href=\"https:\/\/flatlogic.com\/projects\/new\" target=\"_blank\" rel=\"noreferrer noopener\">Vue Tailwind<\/a> and see how rapid and simple it is! If you face difficulties, please, feel free to leave us a message on our <a href=\"https:\/\/flatlogic.com\/forum\/\">forum<\/a>, <a href=\"https:\/\/twitter.com\/flatlogic\/\">Twitter<\/a> or <a href=\"https:\/\/www.facebook.com\/flatlogic\">Facebook<\/a>. We will respond to your inquiry as quickly as possible!<\/p>","protected":false},"excerpt":{"rendered":"<p>Flatlogic added a new stack for it&#8217;s platform. Now you can create apps with Vue Tailwind.<\/p>\n","protected":false},"author":24,"featured_media":12241,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"Flatlogic Platform adds a Vue Tailwind stack built on Vue 3 and Tailwind CSS 3.\nFaster dev with Vite; light state handling via Pinia; refreshed colors, typography, UI.\nStack includes Vuex and vue3-notification alongside Vite, Vue, and Tailwind.\nGenerated apps ship with auth, CRUD, responsive UI, Swagger-documented API, and Docker.","flatlogic_facts":[{"text":"Flatlogic Platform now supports a new Vue Tailwind stack.","source":"https:\/\/flatlogic.com\/projects\/new"},{"text":"Project builds in seconds thanks to Vite.","source":"https:\/\/vitejs.dev\/"},{"text":"Flatlogic generates web app code in minutes from a database schema.","source":""},{"text":"VueJS v3.0 is used in the stack.","source":"https:\/\/vuejs.org\/"},{"text":"Tailwind CSS v3 is used in the stack.","source":"https:\/\/tailwindcss.com\/"}],"footnotes":""},"categories":[1,129],"tags":[123,441,397,42],"class_list":["post-12236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-updates","tag-product-update","tag-flatlogic-platform","tag-vue-tailwind","tag-vuejs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing Vue Tailwind Stack for Flatlogic Platform - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"Flatlogic Platform now supports the new stack \u2013 Vue Tailwind. Create a new web app with Tailwind in minutes!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/vue-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Vue Tailwind Stack for Flatlogic Platform\" \/>\n<meta property=\"og:description\" content=\"Flatlogic Platform now supports the new stack \u2013 Vue Tailwind. Create a new web app with Tailwind in minutes!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/vue-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-01T12:07:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-01T12:07:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alesia S.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alesia S.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducing Vue Tailwind Stack for Flatlogic Platform - Flatlogic Blog","description":"Flatlogic Platform now supports the new stack \u2013 Vue Tailwind. Create a new web app with Tailwind in minutes!","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:\/\/flatlogic.com\/blog\/vue-tailwind\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Vue Tailwind Stack for Flatlogic Platform","og_description":"Flatlogic Platform now supports the new stack \u2013 Vue Tailwind. Create a new web app with Tailwind in minutes!","og_url":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2022-09-01T12:07:18+00:00","article_modified_time":"2022-09-01T12:07:21+00:00","og_image":[{"width":540,"height":540,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png","type":"image\/png"}],"author":"Alesia S.","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alesia S.","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/"},"author":{"name":"Alesia S.","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9"},"headline":"Introducing Vue Tailwind Stack for Flatlogic Platform","datePublished":"2022-09-01T12:07:18+00:00","dateModified":"2022-09-01T12:07:21+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/"},"wordCount":289,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png","keywords":["Flatlogic Generator Updates","Flatlogic Platform","Vue Tailwind","Vue.js"],"articleSection":["News","Updates"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/vue-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/","url":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/","name":"Introducing Vue Tailwind Stack for Flatlogic Platform - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png","datePublished":"2022-09-01T12:07:18+00:00","dateModified":"2022-09-01T12:07:21+00:00","description":"Flatlogic Platform now supports the new stack \u2013 Vue Tailwind. Create a new web app with Tailwind in minutes!","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/vue-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-2022-08-31-at-18.57.12.png","width":540,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/vue-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing Vue Tailwind Stack for Flatlogic Platform"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/4ea8cd13c3b9919c455be1f34183a0c9","name":"Alesia S.","url":"https:\/\/flatlogic.com\/blog\/author\/alesya\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=12236"}],"version-history":[{"count":8,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12236\/revisions"}],"predecessor-version":[{"id":12279,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/12236\/revisions\/12279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/12241"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=12236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=12236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=12236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}