Adding a new nuxt.com logo with useCookie and routing

Рет қаралды 2,461

Күн бұрын

🖌️ 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

Пікірлер: 25

@TheAlexLichter 26 күн бұрын

Did you try the uwu mode yet? 👀

@Muphet 26 күн бұрын

i had no idea such trend exists but this is cool example on how to contribute to open source

@TheAlexLichter 18 күн бұрын

I'd say so too 👏🏻

@MartinMasevski 26 күн бұрын

Love this kind of content! Thank you

@TheAlexLichter 25 күн бұрын

Glad you enjoyed it 🙏🏻

@user-sj7tf2yv3m 26 күн бұрын

Темы о которых невозможно молчать)🐱

@youhan96 26 күн бұрын

For above the fold images I usually use preload on NuxtImg too

@epiphanyatnight8732 25 күн бұрын

Great video! I am curious: Why do we not use local storage? Is there a reason for using cookies to store the data?

@TheAlexLichter 25 күн бұрын

Answered in kzfaq.info/get/bejne/qsmmi8mfmODPlZs.html&lc=UgwWzUsO8F4Xes96zvp4AaABAg TL;DR - localStorage is not available on the server ☺️

@othmanbensaoula489 26 күн бұрын

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 ?

26 күн бұрын

It's the same thing. The second is the react way, the first one is the vue way

@othmanbensaoula489 26 күн бұрын

Well I always used the react way in vue 😆

@TheAlexLichter 18 күн бұрын

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 }

@AksoomHussain7866 26 күн бұрын

it better to also add it trending sound 🤣🤣 with vueuse/useSound on logo hover #justsaying

@rrd_webmania 26 күн бұрын

Out of curiosity: why cookie and not localStorage?

@TheAlexLichter 26 күн бұрын

So it will work also during SSR and doesn't cause a flicker when hard-reloading! 👍🏻

@lovelyboy8056 26 күн бұрын

@@TheAlexLichterin this case cookie better to use for authentication?

@VELIXYZ 26 күн бұрын

@@lovelyboy8056 it only used to prevent flicks of image on start since localStorage is client-only. Cookies are server-side

@lovelyboy8056 26 күн бұрын

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

@TheAlexLichter 23 күн бұрын

You are welcome! 🙏🏻 1) Good idea. Might show when I build my own ESLint config 👀 2) Any specific one you want to see?

@lovelyboy8056 23 күн бұрын

@@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 :)