Creating Your First Vue 3 App with Vite - A Beginner's Tutorial

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 54

  • @yudilokhande8915
    @yudilokhande8915 3 роки тому +18

    I have watched a ton of vue tutorials, and I must say that yours was one of the very best. It'll be interesting to see where you go in the future.

    • @LearnVue
      @LearnVue  3 роки тому +2

      Thanks! Glad you found it helpful.

  • @draggingtheshutter
    @draggingtheshutter Рік тому

    This format does not allow me to get bored. Very well executed

  • @nyagah243
    @nyagah243 2 роки тому +2

    That tutorial was great. Straight to the point and got me to solidify the little that I know about the composition api.

  • @danieltatarkin892
    @danieltatarkin892 2 роки тому +1

    This is a really awesome summary! An idea I have is to re-create this video every year highlighting any new changes in initializing new projects using latest best practices.

  • @rea-dev
    @rea-dev 3 роки тому +3

    I can't believe you have so few videos. You shot very high quality content, I hope you continue

    • @LearnVue
      @LearnVue  3 роки тому +1

      Thank you!! I will continue so subscribe for more :)

    • @Desertbynight
      @Desertbynight 3 роки тому

      @@LearnVue ok subscribed

  • @jessicaryan9820
    @jessicaryan9820 2 роки тому +2

    Doing the course on your website. I am a few lessons in and this is already an outstanding course. Very well explained and presented. Excellent value for money. Hoping you release more courses in the future.

  • @mrralphbur
    @mrralphbur 3 роки тому +4

    We will watch your career with great interest.

  • @ReSpawNnL
    @ReSpawNnL 3 роки тому +1

    Seriously binging your channel right now. Need more content!

    • @LearnVue
      @LearnVue  3 роки тому

      thanks so much - im working on more content!

  • @mohithp8700
    @mohithp8700 2 роки тому +1

    ur such a great creator i am struggling to learn react or vue u cleared my doubt real thanks

  • @susmoysengupta1551
    @susmoysengupta1551 3 роки тому +3

    Your videos are short and very much understandable. Please make videos on Vue authentication using vuex and laravel sanctum or passport.

    • @LearnVue
      @LearnVue  3 роки тому +2

      Vue w/ Passport tutorials sound great - definitely going in the list of videos to make!!

  • @Oderwat
    @Oderwat 3 роки тому +1

    I just wonder why you did not use style when the scaffold already showed it.

  • @hummmingbear
    @hummmingbear 3 роки тому +1

    Would love if you posted a link to the code repo with this example in it

    • @LearnVue
      @LearnVue  3 роки тому

      Hey! I don't have a code repo at the moment, but most of the code can be found on our website on the companion article: learnvue.co/2020/12/setting-up-your-first-vue3-project-vue-3-0-release/.

    • @hummmingbear
      @hummmingbear 3 роки тому

      @@LearnVue thanks! Yes I saw the article, but was hoping to pull down the repo instead of copying all the individual pieces

  • @ssahillppatell
    @ssahillppatell 3 роки тому +1

    Thanks. Best video about the topic out there.

  • @guillermodanielmazzarigiov1768
    @guillermodanielmazzarigiov1768 2 роки тому

    Thanks for the vid! How could you make a Vue boilerplate including router components with vite?

  • @shiya....
    @shiya.... 2 роки тому

    Short and informational, thanks

  • @Romanthology
    @Romanthology 3 роки тому +1

    Great tutotial, thanks !

    • @LearnVue
      @LearnVue  3 роки тому +1

      Thanks! Glad to hear you like it :)

  • @ngegamesantai_
    @ngegamesantai_ 3 роки тому +3

    Subsribed and I'm expecting more content from you. Keep it up dude 😉

  • @yusufburakcakmak
    @yusufburakcakmak 2 роки тому +1

    Nice video thank you

  • @Imaginativeone_DF
    @Imaginativeone_DF Рік тому

    How do I add vue-tools and sqlite?

  • @SusanthCom
    @SusanthCom 3 роки тому +1

    Thanks 👍 good work ❤️

  • @ferdiheredia8137
    @ferdiheredia8137 3 роки тому +1

    great explanation

    • @LearnVue
      @LearnVue  3 роки тому

      Thanks so much for the kind words, can't wait to make more content for all the Vue devs out there!

  • @69leostereo
    @69leostereo 3 роки тому

    should we consider use vite from now on ?

  • @mustafacinar9153
    @mustafacinar9153 2 роки тому

    Nice and clean.

  • @deweywsu
    @deweywsu 2 роки тому

    Maybe it wasn't meant to, but the initial install fails on Windows (error: ERROR_REQUIRE_ESM)

    • @LearnVue
      @LearnVue  2 роки тому

      what version of node are you running?

  • @CatoTheAdopted
    @CatoTheAdopted 3 роки тому

    This is a great tutorial. Subscribed. Not to be too cheeky, but any chance you might know how to properly configure Vite to run with Postcss and Autoprefixer? I've been digging around for the last few days and can't seem to get autoprefixer to work with Vite at all.

    • @dmitryk2058
      @dmitryk2058 3 роки тому

      same here...trying to get that going but no luck so far

    • @clarkeeeee
      @clarkeeeee 3 роки тому

      The latest version of Vite should be working with PostCSS automatically, according to the docs, so all you should need to do is add a postcss.js.config to the directory where your project is. It's kind of frustrating digging for this info, so here's what mine looks like:
      const { default: postcss } = require('./node_modules/postcss');
      module.exports = {
      plugins: {
      'precss': {},
      'postcss-preset-env': {
      stage: 3,
      },
      'autoprefixer': {},
      'cssnano': {},
      }
      }
      The info for what to put in those curly braces is on the docs for each individual plugin, as each one has different config options, such as my "polyfill," which is set to stage 3. Of course, you'll also need to install all the PostCSS plugins you want before they work, with yarn or npm. This is basically what I did for mine:
      yarn add postcss
      yarn add autoprefixer
      yarn add cssnano
      yarn add precss
      yarn add postcss-preset-env
      Adding them all on a one line command didn't work for me for some reason, so I separated them like that.
      Then I restarted the server, and it was working great. Another thing to keep in mind is that not a lot of prefixes are needed these days, so prefixer might actually be working, just not adding prefixes that aren't needed. A great one to test is "::placeholder." Prefixes for that will be generated if things are working.
      One more thing: I don't know 100% if PostCSS is run in the dev server (I'm not THAT smart yet), but I know for sure it runs on build. :]
      That might be TMI, but I hope it leaves no questions for anyone who wants to know how to get this working.

    • @CatoTheAdopted
      @CatoTheAdopted 3 роки тому +1

      @@clarkeeeee Thank you so much for the in depth answer :) I will try this out as soon as I get a chance, in the mean time, I had already moved away from Vite, leaving it to mature some more before using on production projects.

    • @clarkeeeee
      @clarkeeeee 3 роки тому

      @@CatoTheAdopted No problem, good luck on your adventuring!

  • @mytop5602
    @mytop5602 3 роки тому

    What does "export default" ?

  • @oluwafemiolukoya9352
    @oluwafemiolukoya9352 2 роки тому

    awesome tutorial

  • @comunicloud30
    @comunicloud30 2 роки тому

    Awesome video. Thanks

  • @ea5591
    @ea5591 Місяць тому

    Good Video

  • @MontagoDK
    @MontagoDK 3 роки тому +1

    why the fuck is this video so fucking fast ???
    now i need to watch it 2+ times to make sure i understood everything

  • @JimmyGee
    @JimmyGee 3 роки тому +5

    Too fast. But thank you.

    • @LearnVue
      @LearnVue  3 роки тому

      Sorry about that - I'm working on finding the perfect speed to teach everything, but I hope it was still useful.

  • @edenassos
    @edenassos 3 роки тому

    Now where's the Vite 2.0 video? Haha

  • @hutomifawaza
    @hutomifawaza 2 роки тому

    okay

  • @harleylovitos7233
    @harleylovitos7233 2 роки тому

    👍

  • @adriatic123
    @adriatic123 3 роки тому +2

    This is way too fast

  • @sciencecompliance235
    @sciencecompliance235 10 місяців тому

    Too fast. Give people time to process the information.