🔥 (#81) Restricting Prop Values to a List #

October 2022

Hey!

Let me tell you a bit more about what you'll be learning with Mastering Nuxt 3.

Throughout the videos series you will build an online course platform from scratch, covering everything from the frontend to the backend. You'll use TailwindCSS for styling, and you'll even using Prisma with Supabase so you get a Postgres database with a nice TypeScript interface.

But the point of the course isn't to build an app.

The point is to learn Nuxt 3.

So you won't just learn what Nuxt can do, you'll also learn how Nuxt works and why you do things in certain ways.

This includes best practices, how to organize your code, and thinking about the architecture of your app.

If you've never touched Nuxt before, by the end you'll be able to build your own app from scratch.

And if you've been using Nuxt for years, you'll deepen your understanding of Nuxt 3.

Enjoy your tips for this week!

—Michael

🔥 Restrict a prop to a list of types #

Using the validator option in a prop definition you can restrict a prop to a specific set of values:

export default {
  name: "Image",
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: (s) => ["square", "rounded"].includes(s),
    },
  },
};

This validator function takes in a prop and returns either true or false — if the prop is valid or not.

I often use this when I need more options than a boolean will allow but still want to restrict what can be set.

Button types or alert types (info, success, danger, warning) are some of the most common uses — at least in what I work on. Colours, too, are a really great use for this.

But there are many more!

🔥 My favourite git commands #

Here are a few of my favourite git commands (is it weird to have favourite git commands?):

I'm often jumping back and forth between different branches, and typing is annoying:

# Checkout the previous branch
git checkout -

Sometimes I add new files, then realize I don't actually need them:

# Remove any files not tracked by git
git clean

Or I completely broke everything and need to start over:

# Undo all changes to git and the working directory,
# going back to the most recent commit
git reset --hard

Github takes all of the commits on your PR branch and combines them into a single one when you merge. But sometimes you want to merge a branch, and you aren't ready for a PR just yet:

# Squash all commits from a branch into one commit
git merge --squash <branch>
git commit

📜 Coding Better Composables: Options Object (5/5) #

I teamed up with Vue Mastery to create this series on coding better composables.

In this series we cover five different patterns.

For each, we show how you can implement it and then we see it in action with a composable from VueUse.

This fifth and final article of the series shows how we can use the Async Without Await pattern to simplify our composables.

Read it here: Coding Better Composables: Options Object (5/5)

💬 Bugs #

"If debugging is the process of removing software bugs, then programming must be the process of putting them in." —Edsger Dijkstra

🧠 Spaced-repetition: Flexible Arguments #

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.

Sometimes we have a ref that we want to use with our composable. Sometimes we just have the raw data.

Wouldn’t it be nice if it didn’t matter what we already had? Then we could use our composables and it would just work?

Here’s an example using the useTitle composable from VueUse:

// We have a ref already
const titleRef = ref("This is the title of the page");
useTitle(titleRef);

// We just have the string
const title = "This is the title of the page";
const titleRef = useTitle(title);

We can do this by implementing the Flexible Arguments pattern:

export function useTitle(maybeRef) {
  const titleRef = ref(maybeRef);

  // Use titleRef in the composable
}

The ref function will either create a ref for us, or return a ref if we give it one.

This means that we can pass it either type and we know we’ll get a ref back.

The opposite is true with the unref function. If we need to use a raw primitive value rather than a ref in our composable, we can use unref to achieve a similar result.

export function useTitle(maybeRef) {
  const titleString = unref(maybeRef);

  // Use titleString in the composable
}

p.s. I also have three courses: Vue Tips Collection, Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-081-october-05/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。