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.
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.
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/.
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.
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.
@@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.
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.
Thanks! Glad you found it helpful.
This format does not allow me to get bored. Very well executed
That tutorial was great. Straight to the point and got me to solidify the little that I know about the composition api.
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.
I can't believe you have so few videos. You shot very high quality content, I hope you continue
Thank you!! I will continue so subscribe for more :)
@@LearnVue ok subscribed
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.
We will watch your career with great interest.
We will indeed
Seriously binging your channel right now. Need more content!
thanks so much - im working on more content!
ur such a great creator i am struggling to learn react or vue u cleared my doubt real thanks
Your videos are short and very much understandable. Please make videos on Vue authentication using vuex and laravel sanctum or passport.
Vue w/ Passport tutorials sound great - definitely going in the list of videos to make!!
I just wonder why you did not use style when the scaffold already showed it.
Would love if you posted a link to the code repo with this example in it
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/.
@@LearnVue thanks! Yes I saw the article, but was hoping to pull down the repo instead of copying all the individual pieces
Thanks. Best video about the topic out there.
Wow, thanks!
Thanks for the vid! How could you make a Vue boilerplate including router components with vite?
Short and informational, thanks
Great tutotial, thanks !
Thanks! Glad to hear you like it :)
Subsribed and I'm expecting more content from you. Keep it up dude 😉
Thanks!
Nice video thank you
How do I add vue-tools and sqlite?
Thanks 👍 good work ❤️
great explanation
Thanks so much for the kind words, can't wait to make more content for all the Vue devs out there!
should we consider use vite from now on ?
Nice and clean.
Maybe it wasn't meant to, but the initial install fails on Windows (error: ERROR_REQUIRE_ESM)
what version of node are you running?
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.
same here...trying to get that going but no luck so far
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.
@@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.
@@CatoTheAdopted No problem, good luck on your adventuring!
What does "export default" ?
awesome tutorial
Awesome video. Thanks
Good Video
why the fuck is this video so fucking fast ???
now i need to watch it 2+ times to make sure i understood everything
Too fast. But thank you.
Sorry about that - I'm working on finding the perfect speed to teach everything, but I hope it was still useful.
Now where's the Vite 2.0 video? Haha
okay
👍
This is way too fast
Too fast. Give people time to process the information.