Adding a new nuxt.com logo with useCookie and routing
Вставка
- Опубліковано 9 лип 2024
- 🖌️ Seen the new "uwu" logo trend across frameworks and tools like Vite or Vue! Of course, there is also such a logo for Nuxt.js - it only has to be added to the website - and that's exactly what we are doing in this video. From cloning the repo to implementing the feature and sending the PR. Join on the journey and see the thought process, steps and the implementation of the new Nuxt uwu logo.
---
Key points:
🙏🏻 Simple showcase on how to contribute to Open Source
✨ Adding a new Nuxt Logo to the website
🍪 useCookie example
🧠 Thought process behind implementing a feature
---
Links:
🔗 TRY IT - nuxt.com/?uwu
🔗 Logo by - / icarusgkx
🔗 Oh My Z Shell - ohmyz.sh/
🔗 Repo - github.com/nuxt/nuxt.com/
🔗 useCookie - nuxt.com/docs/api/composables...
🔗 Nuxt Image - image.nuxtjs.org/
🔗 Final PR - github.com/nuxt/nuxt.com/pull...
📺 Avoid Losing Reactivity in Vue - • Avoid losing Reactivit...
📺 Building an Association Manager - • Stream VOD #006 - Buil...
📺 DejaVue Episode #008 about Vue.js Amsterdam - • DejaVue #E008 - Vue.js...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
Chapters:
00:00 Intro
00:13 Goal for the video
00:35 The new Logo
01:07 How other frameworks use the uwu logos
01:45 Getting the app up and running
03:47 Adding the logo
06:49 Implementing a simple toggle
08:55 Toggle the logo based on the query
10:33 Saving the preference in a cookie
11:26 Disabling uwu
13:24 Testing
13:49 Setting the default to false
14:06 Optimizing the image with NuxtImage
16:38 Creating a PR
20:22 Summary - Наука та технологія
Did you try the uwu mode yet? 👀
i had no idea such trend exists but this is cool example on how to contribute to open source
I'd say so too 👏🏻
Love this kind of content! Thank you
Glad you enjoyed it 🙏🏻
Темы о которых невозможно молчать)🐱
For above the fold images I usually use preload on NuxtImg too
oh didn't know this syntax :class="{'md:pt-24' : isUwuEnabled}" I used to make like this :class="{isUwuEnabled && 'md:pt-24'}" so what's the difference ?
It's the same thing. The second is the react way, the first one is the vue way
Well I always used the react way in vue 😆
actually both is fine. I prefer an object though because multiple classes/conditions could occur, e.g. { 'md:pt-24': anotherCondition, 'text-red-500': andAnotherCondition }
Great video! I am curious: Why do we not use local storage? Is there a reason for using cookies to store the data?
Answered in ua-cam.com/video/tcvXfn3zkeg/v-deo.html&lc=UgwWzUsO8F4Xes96zvp4AaABAg
TL;DR - localStorage is not available on the server ☺️
Great showcase how to do pull requests and make nuxt & vue bettter
Thanks 🙏🏻
Out of curiosity: why cookie and not localStorage?
So it will work also during SSR and doesn't cause a flicker when hard-reloading! 👍🏻
@@TheAlexLichterin this case cookie better to use for authentication?
@@lovelyboy8056 it only used to prevent flicks of image on start since localStorage is client-only. Cookies are server-side
it better to also add it trending sound 🤣🤣 with vueuse/useSound on logo hover #justsaying
thanks for this video
Idea for your future video: create some component or plugin and add it to npm. Show all process how unify component or plug-in, then add to some project.
Second idea: how add 3rd libraries written in pure js into nuxt
You are welcome! 🙏🏻
1) Good idea. Might show when I build my own ESLint config 👀
2) Any specific one you want to see?
@@TheAlexLichter thanks for answer. About second it can be photoswipe. I tried couple times, but gave up. Exist example for vue. But I tried to use it with nuxt. It didn’t work. Idea in that, to took pure js some library and inject into nuxt as a plugin might be or how it be by best practices :)