Read this on my blog Hey there! Today I launched Advanced Reactivity! If you missed it, you can check it out here: Advanced Reactivity. I recently wrote two articles based on the course: Enjoy your tips and the rest of the newsletter! — Michael Nuxt Tips Collection Master Nuxt without hours digging through docs. Learn what you need in just 5 minutes a day: - 117 practical tips to unlock hidden features of Nuxt
- 14 chapters covering components, routing, SSR, testing and more
- 3 daily tips for 3 months via email
- 7 real-world code repos to learn from
- Reviewed by Nuxt core team for accuracy
"Highly recommend Michael's Nuxt Tips Collection. He's one of the best Vue & Nuxt teachers I know." — Sébastien Chopin Master Nuxt Today → 🔥 The Data Store Pattern The simplest solution to lots of state management problems is to use a composable to create a shareable data store. This pattern has a few parts: - A global state singleton
- Exporting some or all of this state
- Methods to access and modify the state
Here's a simple example: import { reactive, toRefs, readonly } from 'vue'; import { themes } from './utils'; // 1. Create global state in module scope, shared every // time we use this composable const state = reactive({ darkMode: false, sidebarCollapsed: false, // 2. This theme value is kept private to this composable theme: 'nord', }); export default () => { // 2. Expose only some of the state // Using toRefs allows us to share individual values const { darkMode, sidebarCollapsed } = toRefs(state); // 3. Modify our underlying state const changeTheme = (newTheme) => { if (themes.includes(newTheme)) { // Only update if it's a valid theme state.theme = newTheme; } } return { // 2. Only return some of the state darkMode, sidebarCollapsed, // 2. Only expose a readonly version of state theme: readonly(state.theme), // 3. We return a method to modify underlying state changeTheme, } }
🔥 Overriding styles of a child component — the right way Scoped CSS is fantastic for keeping things tidy and not accidentally bleeding styles into other parts of your app. But sometimes, you need to override the styles of a child component and break out of that scope. Vue has a :deep selector just for this: <style scoped> /* Override CSS of a child component while keeping styles scoped */ .my-component :deep(.child-component) { font-size: 24px; } </style>
In Vue 2 this has a slightly different syntax depending on which CSS pre-processor you're using: <style scoped> /* When using SASS */ .my-component ::v-deep .child-component { font-size: 24px; } /* Everything else */ .my-component >>> .child-component { font-size: 24px; } </style>
Yes, I have previously covered why you shouldn't do this, but overriding styles can be the best solution (we don't believe in "best practices" here). 🔥 Mock Any Import in Nuxt One handy helper method in @nuxt/test-utils is mockNuxtImport. It's a convenience method to make it easier to mock anything that Nuxt would normally auto-import: import { mockNuxtImport } from '@nuxt/test-utils/runtime'; mockNuxtImport('useAsyncData', () => { return () => { return { data: 'Mocked data' }; }; }); // ...tests
📜 Prisma with Nuxt: Modifying Data with Prisma (5 of 5) So far in this series we've covered a lot on how to use Prisma in our Nuxt apps. But we've left out a major piece — actually being able to modify the data in the database. A pretty crucial part of the puzzle I think! In this article I'll show you how to modify data in your database using Prisma. Check it out here: Prisma with Nuxt: Modifying Data with Prisma (5 of 5) 📜 How to Redirect in Nuxt (Every Single Way) There are a lot of different ways to redirect users in Nuxt, each with their own use cases. In this (very detailed!) article I explore the different ways to redirect users in Nuxt, giving examples of when each might be useful. Check it out here: How to Redirect in Nuxt (Every Single Way) 💬 Brute force "When in doubt, use brute force." — Steve McConnell 🧠 Spaced-repetition: Using two script blocks The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬 Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory. The <script setup> // Composition API import { ref } from 'vue'; console.log('Setting up new component instance'); const count = ref(0); </script> <script> // ...and the options API too! export default { name: 'DoubleScript', }; </script>
|
评论
发表评论