Quasar, Vite, UnoCSS and unplugin-auto-import

Поделиться
HTML-код
  • Опубликовано: 24 ноя 2024

Комментарии • 20

  • @antfu
    @antfu 3 года назад +13

    Thanks for the great sharing Luke!
    For UnoCSS, attributify mode is not include by default, you will need to include it in the preset manually (saw you did that later, sorry for a bit confusing 😅)
    For IDE support of auto-import, it's a bit less intrutive but since VS Code is relying on TypeScript to provide IDE support even for JS, which mean you will need to enabled `dts: true` in the plugin (it you have typescript install locally it will enabled automatically) to generate the `.d.ts` file.

    • @LukeDiebold
      @LukeDiebold  3 года назад +1

      Thanks Anthony!
      I'll do an edited version of this video with your feedback.
      Also, if you ever want me to do a video on any of your work, please ask! It would be an absolute pleasure ☺️

    • @juliejones8785
      @juliejones8785 3 года назад

      I tried dts:true, which generates a components.d.ts file. However when I go-to-definition vscode opens the components.d.ts file.

    • @ChumX100
      @ChumX100 2 года назад +1

      Dude, your libraries rock! UnoCSS is game-changing. I've migrated a project from Windi to Uno and some complex dynamic styling needing state and safelisting were completely solved with a couple of custom rules. Keep up the good work 🔥

  • @mrrolandlawrence
    @mrrolandlawrence 2 года назад

    unplugin & uno are just awesome with vite. Have been using of late & wow talk about simplifying build time. Have swapped over to pnpm as well.

  • @hasanerken9604
    @hasanerken9604 3 года назад +1

    Thanks for this great video, and listening to you is so exciting and motivating.

    • @LukeDiebold
      @LukeDiebold  3 года назад +1

      Most welcome! Any other videos you'd like to see? ☺️

    • @hasanerken9604
      @hasanerken9604 3 года назад +1

      @@LukeDiebold Integration of any charting library to vite and quasar or integration of any testing framework, both might be great and very helpful.

    • @LukeDiebold
      @LukeDiebold  3 года назад +1

      @@hasanerken9604 very nice! I have some charting experience so that could be fun ☺️

  • @manee427
    @manee427 2 года назад +1

    Hi community . I have tried to add unplugin auto import to quasar project but it is not working. is it special config for that? i made extra vite.config.ts file for that but not workig.

    • @eyleron
      @eyleron 10 месяцев назад

      I did as well, as Luke did in his other Supabase video, and I could not get it working either 😔

  • @juliejones8785
    @juliejones8785 3 года назад +1

    Try both unplugin-auto-import and unplugin-vue-components in a quasar project with . It is amazing how short and simple an SFC is without all the boilerplate and duplication.

    • @LukeDiebold
      @LukeDiebold  3 года назад

      Looks like Quasar has already implemented auto import with its core components... Do you know why they have a "quasar" section in their docs?
      Maybe we get extra typing...

    • @juliejones8785
      @juliejones8785 3 года назад

      @@LukeDiebold I don't. Quasar has auto-imported quasar components since I started using it (V2). I did scan some of the code (the docs aren't complete enough for me) and it looked like it might add useQuasar and possibly some other non-component items. I haven't managed to get my composables to auto import yet and auto import breaks goto-definition in vscode which I am also trying to fix

  • @RobertWildling
    @RobertWildling 2 года назад

    Any chance to re-do this video with the new quasar-cli's vite functionality? It seems that what you present here is not reproducible 1:1. (E.g. there is no vit.config.js file anymore, instead everything has to be configured within quasar.config.js...)
    Please correct me, if I'm wrong!
    Would be awesome!

    • @LukeDiebold
      @LukeDiebold  2 года назад +1

      Yes I can do that! I'll try to carve out some time tomorrow morning.
      For now, checkout the docs on vite cli. My guess is you want to checkout extendViteConf: quasar.dev/quasar-cli-vite/quasar-config-js#build

  • @mikehurtado4772
    @mikehurtado4772 3 года назад

    No pensáis en los cristianos que vemos lis videos desde un tablet de 10"

  • @juliejones8785
    @juliejones8785 3 года назад

    I'm so disappointed. I thought that a vite plugin for quasar would let me use quasar cli and just have webpack replaced with vite. Watching you set up the project it looks more like setting up a vite project, adding quasar plugins, and then pasting all the vue code in. I hope it rapidly progresses to being part of standard quasar.

    • @LukeDiebold
      @LukeDiebold  3 года назад

      This will probably happen eventually. I see this as a positive thing, becuase it makes it a whole lot easier for people to introduce Quasar to an existing project.
      This has been a painpoint for a lot of people for some time now.
      Having said that, I also look forward to Quasar's foundation moving to vite. Currently, we can't have a single code for all platforms AND use vite.

    • @juliejones8785
      @juliejones8785 3 года назад

      @@LukeDiebold Vite looks incredible, but until it fits into quasar seamlessly I won't be converting. Quasar is too useful as a multi-platform build system. I have been submitting issues for quasar. I think it is very good but with a few changes it could be great! I don't really like the default CSS for the components. They seem to be sized wrong, etc. For example: I would expect the defauts for to to match the browser, but they are huge. All that said, I am trying to learn enough so that I can contribute to the project.