Видео

1:45:28 How do you select multiple of the same line and then delete them? Also, thank you for this tutorial, it was very helpful!!

Takes a while getting use to... Also, what I will never understand: is "update:modelValue" a reserved name? Like, can I also name it "update:content"?

Is there any use you can recommend for the cms panel

Thanks

I am unable to find this code in your github.

this video develop my Vue skill. thanks.

I only watch 19 min video and had to stop and say that this is the best tailwind tutorial EVER!!! and you are an Amazing instructor. Very clear instructions and easy to follow as well. Thank you so much for sharing such a valuable content free of cost. may Almighty bless you. Amen. I subscribed your Channel as well.

Hello sir can you make a video about nuxt apollo? I am trying to initially fetch my data using useAsyncQuery but when I reload the page the data are gone but when using <NuxtLink> going back to that page displayed my data

Thank you so much, Excellent tutorial

I come from Reactland, the slots approach seems really like a pattern we call composable components. Really nice how this kind of knowledge can be passed through frameworks with no issues at all :)

What to do if i want to make whole form resuable?

I like this vedio

Not showing how template is build and no github repo?

It is not secure.

I have a question if we use pick on our call function is that essentially what Graphql tries to implement?

Amazing video John, the way you simplest things is admirable.

Thanks man

for me it is not working i am using mac

you are the best easily. thanks for sharing better approaches instead of just talking about how to do things in the most primitive way

That doesn't work on ios

Buen video bro, pero hay un problem, es que cuando se activa el modo oscuro, y al actualizer la página, me arroja un pantallazo blanco 2:29, como lo soluciono

Great videos! I was looking for a channel that explains how to utilize nuxt for a long while!!

This tutorial could have been 1hr instead of 2 if it wasnt for all the styling 😅, its good tho

Pro tip: no need to make deleted points a ref 😎 17:23

Thanks, John! This helped a lot!

I have an interview for a Senior Vue Front End position and this couldn't have came at a better time; thank you so much for the awesome content! I added in another feature (albeit, in a hacky way) where there's a little indicator that appears briefly to let you know your progress has been saved: <script> let saveDisplay = ref(false); function saveContent() { clearTimeout(timeout.value); setTimeout(() => (saveDisplay.value = false), 3000); timeout.value = setTimeout(() => { saveDisplay.value = true; localStorage.setItem("quillContent", JSON.stringify(quillContent.value)); }, 800); </script> <template> <div v-if="saveDisplay">Progress Saved</div> </template>

It’s not working for jest , can anyone suggest me how to connect this extension with jest .

Thanks a lot, great content. I was woundering if you could share how you setup your vs code to Vue and Nuxt projects. I'm can't have the types for nuxt UI autocomplete and have a weird problem to auto import components inside the components folder.

Sorry to yet again be the squeaky wheel in this comment section, but just wanting to share new knowledge I'm learning that can simplify the overall process for form validations within Vue. At 46:27, a lot of the validation logic that you're writing out is functionality that already exists from the client's browser. If you wrap your input in a <form> tag and inject Vue's v-on directive, along with the 'required' attribute in the <input> tag, both the validation for an empty submit and resetting the input field after a valid submission is much easier. You're also able to submit the form by hitting the Enter button, rather than having to only click the "Create" button, when you wrap it in a <form> tag. This is what it looks like: <!-- TodoCreator.vue --> <script setup> import { ref } from 'vue'; const todo = ref(''); const emit = defineEmits(['create-todo']); function createTodo() { emit('create-todo', todo.value); todo.value = ''; } </script> <template> <form @submit.prevent @submit="createTodo"> <div class="input-wrap"> <input required type="text" placeholder="Enter Your Todo" v-model="todo" /> <button>Create Your Todo</button> </div> </form> </template> <!-- TodosView.vue --> <script setup> import { ref } from 'vue'; import TodoCreator from '../components/TodoCreator.vue'; const todoList = ref([]); const createTodo = (todo) => { todoList.value.push({ id: crypto.randomUUID(), todo, isCompleted: null, isEditing: null, }); }; </script> <template> <main> <h1>Create a Cruddy</h1> <TodoCreator @create-todo="createTodo" /> </main> </template>

Amazing course, thank you so much for this, John! The level of detail you go into is wonderful and miles above the usual "code-along" tutorials. I wanted to mention at 41:05, defineEmits() doesn't need to be imported, nor does defineProps(); that setup attribute that's included in the script tag allows for those macros to be compiled at run-time, so no imports are necessary for them

Warm hugs. Thank you sir.

Great tip. I guess pending is going to be replaced by status==='pending' in v4

I was wondering, when using useFetch it is universale rendering, when is it doing ssr and when is it doing csr? Because if you have a loading screen it is basically doing csr which is not great for seo right?

This helped so much, was farting around failing with Mailgun and this video and Resend came into save the day for my business. Thank you John, all the very best mate.

Thank you ❤

Hi, thank you for this helpful video. Does this supposed to work in Vue3 if I implemented SSR the Vite SSR way?

can we use it for video instead of image? and make the active slide autoplay like instagram?

you sir are an excellent teacher, kudos to you...

For those who still couldn't see the website, there will be 2 rules named "Visual Studio Code" in Inbound Rules. Edit Properties for either or both of them as follows: "Windows Defender Firewall with Advanced Security" > Inbound Rules > Double click "Visual Studio Code" > Uncheck "Private" or whichever that applies to you > Done!

Love you thank you very much

one word: LEGENDARY! 🎉🏆

Thanks for that useful tips in here. Just wondered if a hydration mismatch warning has been logged on the deployed website?

Very useful info. Thank You!

Thank you so much for this, very helpful.

This is a really great overview thanks for putting this together

Hello! Why doesn't this work with Nuxt 3?

thanks this was very helpful 💯

auth.js from middleware (prevent access to profile page if !user.value) export default defineNuxtRouteMiddleware(() => { const user = useSupabaseUser() if (!user.value) { return navigateTo('/login') } }) auth2.js from middleware (redirect the login page to profile page if logged in) export default defineNuxtRouteMiddleware(() => { const user = useSupabaseUser() if (user.value) { return navigateTo('/profile') } })

login/register page code: <template> <div> <div class="flex justify-between max-sm:flex-col mt-6 py-10 bggradito " > <div class="flex-1"> <img src="~assets/images/image1.png" class="w-full px-3"> </div> <div class="flex-1 mt-16 max-md:mt-3 max-md:px-3 "> <div class="relative overflow-hidden bg-white shadow-lg shadow-slate-500 w-72 max-sm::w-60 h-96 mx-auto "> <div class="text-center py-4 px-6"> <span class="text-gray-800 font-bold mr-7 cursor-pointer" @click="showRegister = false" >Login</span> <span class="text-gray-800 font-bold cursor-pointer" @click="showRegister = true">Register</span> <hr class=" w-20 h-1 bg-red-500 transform translate-x-[120px] mt-2 transition-transform duration-500 " id="indicator" :class="{' transform translate-x-[30px]' : !showRegister}"> </div> <form @submit.prevent="signIn" :class="{'transform translate-x-[300px]' : !showRegister}" class="absolute -left-[300px] top-24 w-[300px] space-y-4 px-5 max-md:px-2 transition-transform duration-500"> <input v-model="logEmail" type="text" placeholder="Email" class="w-full p-2 border-gray-300 border text-sm"> <input v-model="logPassword" type="password" placeholder="Password" class="w-full p-2 border-gray-300 border text-sm"> <button class="px-6 py-2 bg-red-500 rounded-full text-white block w-full">Login</button> <p v-if="logErrorMessage" class="text-red-500">{{ logErrorMessage }}</p> <p class="text-sm text-gray-500 cursor-pointer text-center">Forgot Password?</p> </form> <form @submit.prevent="signUp" :class="{'transform translate-x-[300px]' : !showRegister}" class="absolute left-0 top-24 max-w-[300px] space-y-4 px-5 max-md:px-2 transition-transform duration-500"> <input v-model="email" type="email" placeholder="Email" class="w-full p-2 border-gray-300 border text-sm"> <input v-model="password" type="password" placeholder="Password" class="w-full p-2 border-gray-300 border text-sm"> <input v-model="name" type="text" placeholder="Full Name" class="w-full p-2 border-gray-300 border text-sm"> <input v-model="age" type="number" placeholder="Age" class="w-full p-2 border-gray-300 border text-sm"> <p v-if="errorMessage" class="text-red-500">{{ errorMessage }}</p> <p v-if="successMessage" class="text-green-500">{{ successMessage }}</p> <button class="px-6 py-2 bg-red-500 rounded-full text-white block w-full ">Register</button> </form> </div> </div> </div> </div> </template> <script setup> const showRegister = ref(true) //when made back to true, the initial positions are restored. when false, the register and login move 300 pixesl to the right const client = useSupabaseClient() //if logged in, navigateTo profile: definePageMeta({ middleware: ['auth2'] }) //script for registeration const name = ref('') const age = ref(null) const email = ref('') const password = ref(null) const errorMessage = ref(null) const successMessage = ref(null) async function signUp() { try { const {data, error} = await client.auth.signUp({ email: email.value.trim(), password: password.value, options: { data: { name: name.value, age: age.value } } }) if (error) throw error //if no error: successMessage.value = 'Check your email to confirm your account' } catch (error) { errorMessage.value = error.message } } //script for login const router = useRouter() const logEmail = ref('') const logPassword = ref(null) const logErrorMessage = ref(null) async function signIn() { try { const { error} = await client.auth.signInWithPassword({ email: logEmail.value.trim(), password: logPassword.value }) if(error) throw error; router.push('/profile'); } catch (error) { logErrorMessage.value = error.message } } </script> <style scoped> #account { background: radial-gradient(#fff, #ffd6d6); } </style>

This was so useful, thanks! Please more nuxt and nuxt + supabase content