Code updates for insidewebdev youtube course twitter-clone

yt_insidewebdev_twitter_clone_code_updates.md

Using Nuxt 3 RC 13 (latest as of Nov 9, 2022)

update using Nuxt 3 stable release.

So far two major changes are the names of useBody changed to readBody and useCookies changed to parseCookies.

Still having issue with having to refresh page to get content to show or to get the correct tweetId from the url. Will update as soon as I figure it out.

I'll be documenting updated code changes here while going through the course. Once I finish the course I'll upload the complete project repo.

The official first stable release is just around the corner. If there are any changes after upgrading to the official stable release, I will add them here too.

Heroicons

Heroicons installed in the course is at v2 now so if you followed the course instructions you should see an error telling you that you are trying to import v1 icons from v2 and suggesting that you remove v2 and install v1. Don't do this!

Here are the correct import statements now. Some icons may be available in only the 20 or 24 directory. If you add lang="ts" to your script setup tag it will help you find the right directory here. Or you can go to node_modules/@heroicons/vue and look through the directory/file structure. You can also go to heroicons.com and search. If you find one you like the heyphenated name on the website should match up with one of the pascal case names in the v2 package. For example 'chat-bubble-oval-left-illipsis' is found as 'ChatBubbleOvalLeftEllipsisIcon'

Left sidebar icons

    import { HomeIcon } from '@heroicons/vue/20/solid';
    import {
      HashtagIcon,
      BellIcon,
      InboxIcon,
      BookmarkIcon,
      DocumentTextIcon,
      UserIcon,
      EllipsisHorizontalCircleIcon,
    } from '@heroicons/vue/24/outline';

Tweet Item Action Icons. I renamed them because of long names and to make it more clear what function they are for

import {
  ChatBubbleOvalLeftEllipsisIcon as ChatIcon,
  HeartIcon as LikeIcon,
  ArrowPathIcon as RetweetIcon,
  ArrowUpOnSquareIcon as ShareIcon,
} from '@heroicons/vue/24/outline';

H3 sendError import

In our api routes, sendError no longer has to be imported from H3

Tweet textarea scrollbars

In my browser (chrome on windows) I had little ugly scrollbar on the right side of the textarea There is a plugin for tailwind or you can simply add a couple styles scoped to the component. some info here

Add to the bottom of Tweet/Form/Input.vue and add scrollbar-hide class to the textarea

<style scoped>
/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
</style>

Dont need vue 2 syntax @click.native

@click by it's self will do. @click.native is old syntax. Author probably uses out of habbit or was not aware because it still works. migration docs here

Not an update but a preference? Standard? Correction? In our first schema.prisma model definition for "User" we can tell it to map "users" table to the "User" model when we push to mongo

More info here

model User {
  id String @id @default(auto()) @map("_id") @db.ObjectId
  email String
  name String?
  username String @unique
  password String
  profileImage String?

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}