Set up FlyonUI with Vuejs using Tailwind CSS
Integrate FlyonUI with Vuejs and Tailwind CSS to build a modern, responsive UI, streamlining your development process with ease.
Installation
Please note that the plugin has been tested with the latest version of the framework (v3.5.11). The framework was installed using the standard `npm create vue@latest` command.
If you are using your own project structure, be mindful of file paths!
Quick
Vue.js
setup
Vue is a progressive JavaScript framework for building modern web applications. If you haven't set up Tailwind CSS yet, check out
Vue Tailwind CSS
installation guides.
1
Install FlyonUI
Install
flyonui
via npm.
2
Configure FlyonUI JavaScript paths
Add the path to FlyonUI JavaScript files in your tailwind.config.js
file.
Note: If you want to include specific js component
Tip : Using specific components helps minimize the size of the generated JavaScript and CSS.
3
Add the FlyonUI JavaScript
Add the FlyonUI JavaScript in your app entry point root_directory/src/main.ts|js
Note: If you want to include specific js component
4
Add a reinitialization helper (vue-router)
Add code that reinitializes the components every time the page is refreshed to your "route" root_directory/src/router/index.ts|js
.
Note: If you want to include specific js component
5
Add a reinitialization helper (without router)
Add code that reinitializes the components every time when app is mounted root_directory/src/App.vue
Note: If you want to include specific js component