🤯 I MIGRATED a Next.js application to Nuxt.js in 1 HOUR

A lot of people wondered how easy it is to switch over from React and Next.js to Vue and Nuxt.js - In this video you'll see - actually it isn't that difficult. In roughly an hour we will write idiomatic code and convert @t3dotgg's QuickPic app (fully open source) over to the vue-based meta framework with all features that it has! #nextjs #nuxt #nuxtjs #vuejs #vue #webdevelopment --- Links and Resources: 🔗 Original App https://quickpic.t3.gg/ 🔗 Deployed Nuxt app https://quickpic.lichter.io/ 🔗 Code https://github.com/manniL/quickpic-nuxt/ 🔗 My PR to Theo's app https://github.com/t3dotgg/quickpic/pull/1 🔗 SEO and OG Image modules https://nuxtseo.com/ 📺 5 Features missing in Vue https://www.youtube.com/watch?v=P3dxu0wNLDw 📺 @DejaVueFm #E030 - Pinia and Data Loaders (with Eduardo San Martin Morote) https://www.youtube.com/watch?v=dUztjolNZig --- Chaptermarks: 00:00:00 Intro 00:00:46 Which app will we convert? 00:01:50 Exploring the existing Next.js code 00:04:30 Adapting the package.json 00:05:05 Setting up our nuxt.config.ts and adapting the tsconfig for auto imports 00:06:08 First look in the browser 00:06:18 Opt-in to Nuxt 4 changes and creating an App.vue 00:10:05 Converting the Index Page 00:12:25 Install Tailwind CSS and add global CSS 00:14:05 Adding fonts via nuxt/fonts 00:18:20 Setting up the favicon 00:19:42 The (tools) folder and creating our first layout 00:22:15 Enabling Layouts in our App.vue 00:23:20 Choosing a page to tackle next 00:23:40 Converting the square-image page over 00:24:45 Building the SquareTool.vue component 00:25:42 Starting with the JSX 00:29:00 useState to ref 00:30:14 useEffect to watchEffect 00:31:49 Setter functions to .value changes 00:34:50 Event Handler Functions 00:37:00 Checking the app in the browser 00:37:55 Applying the layout for the page 00:38:42 Adding plausible with nuxt/scripts 00:43:35 Proxying scripts via route rules 00:44:37 Setting up the SvgTool component 00:49:33 Creating a subcomponent and using template refs 00:52:17 Not extracting the SaveAsPngButton 00:54:10 Converting the useSvgConverter hook to a composable 00:55:08 useMemo to a computed property 00:58:22 Summarizing the useSvConverter composables an reactivity 00:58:40 Moving useFileUpload over 01:00:30 Do not extract composables unless you reuse them 01:00:47 Wrapping up the SvgTool component 01:03:15 Rookie mistake - .value in the template and forgetting .value 01:04:29 OG Image Generation 01:08:44 Nuxt DevTools for Debugging and Testing 01:11:34 Summary and Wrapping up!