Is preline.co the best option?

[guugg]

Getting started with vue testing

---

---

• No css used

dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-ffA2A3f8.css   4.73 kB │ gzip:  1.38 kB
dist/assets/index-CTZ2DQoo.js   59.07 kB │ gzip: 23.58 kB

• import "flyonui/flyonui"
• Accordion

dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/index-MeXMEf3V.css  123.41 kB │ gzip: 15.69 kB
dist/assets/index-CXMmA8QV.js   231.63 kB │ gzip: 63.79 kB

• import "flyonui/dist/js/accordion"
• Accordion (Import Single)

dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/index-MeXMEf3V.css  123.41 kB │ gzip: 15.69 kB
dist/assets/index-DEOrVrCA.js    67.64 kB │ gzip: 26.02 kB

---

---

• import "preline/preline";
• Accordion

dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/index-DSTm47NT.css   14.73 kB │ gzip:  3.34 kB
dist/assets/index-DbaeBegm.js   315.32 kB │ gzip: 81.34 kB

• import "@preline/accordion";
• Accordion

dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-DSTm47NT.css  14.73 kB │ gzip:  3.34 kB
dist/assets/index-Dhcwt_xC.js   72.93 kB │ gzip: 27.07 kB

---

---

• daisyui
• Accordion

dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-ty4iT-8w.css  20.49 kB │ gzip:  4.42 kB
dist/assets/index-CbUqbu71.js   59.37 kB │ gzip: 23.61 kB

[ajaypatelaj]

Hello @guugg

Thanks for sharing your input.

• No css used This is proper

dist/index.html                  0.46 kB │ gzip:  0.30 kB
dist/assets/index-ffA2A3f8.css   4.73 kB │ gzip:  1.38 kB
dist/assets/index-CTZ2DQoo.js   59.07 kB │ gzip: 23.58 kB

• import "flyonui/flyonui" Means you are using every component from flyonui (Not Just Accordion)

• There are a few improvements if using the accordion component only, which can improve the performance.

With import 'flyonui/dist/js/accordion'; you also need to update tailwind.config.js file with './node_modules/flyonui/dist/js/accordion.js'

For ex:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './node_modules/flyonui/dist/js/accordion.js', // You can include required components 
    './src/**/*.vue',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flyonui'), 
    require('flyonui/plugin'),
  ],
}

Build with generate files with this size

dist/index.html                  0.46 kB │ gzip:  0.29 kB
dist/assets/index-lCxnap_8.css  19.45 kB │ gzip:  4.40 kB
dist/assets/index-lmwSEZgo.js   69.83 kB │ gzip: 26.76 kB

You can refer to the attached zip for more details.
flyonui-vue.zip

Also, we have mentioned "Require only files" in our installation process.
https://github.com/themeselection/flyonui?tab=readme-ov-file#installation-via-npm

However, we will try to improve it.

Cheers 🥂

[guugg]

Reply late. flyonui is great!