Weekly Vue News #154 - Dockerizing a Nuxt 3 App

Weekly Vue News #154 Dockerizing a Nuxt 3 App View online Hi 👋 I'm back from vacation and working on new content for upcoming issues of this newsletter. Have a lovely week ☀️ Vue 📕 Mark Raw Optimization 👉🏻 This article takes a deeper look at VueUse's useManualRefHistory, and how you can optimize your non-reactive state when it gets large. 🎧 Ten Years of Vue (with Evan You) 👉🏻 Alex and Michael meet up with the creator of Vue, Vite and Rolldown, Evan You himself and talk about the last ten years of Vue. 📹 Vue.js Crash Course 2024 👉🏻 A 3 hour crash course of the Vue.js framework. 👉🏻 You will learn all the fundamentals including components, directives, lifecycle, events and much more. 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 Integrating HeadlessUI and TailwindCSS with Nuxt: A Comprehensive Guide 👉🏻 Learn how to integrate HeadlessUI and TailwindCSS with Nuxt applications in this comprehensive, step-by-step guide. 📕 How to Integrate Shadcn with Nuxt 👉🏻 In this detailed guide, you learn how to integrate Shadcn Vue with Nuxt. 🛠️ Nuxt Auth Utils v0.2 is out 👉🏻 With 4 new OAuth providers including: Paypal, X / Twitter and Steam 🛠️ Nuxt Workers 👉🏻 SSR-safe, zero-config Web Workers integration for Nuxt. 📹 Nuxt + Vue: The Game-Changer Your New Projects Deserve 👉🏻 In this insightful talk, Daniel Kelly explores the game-changing features of Vue and Nuxt that will elevate your development experience. 🔥 Nuxt Tip: Dockerizing your App Docker has revolutionized the way developers build, ship, and run applications by providing a consistent environment for development, testing, and production. Why Dockerize Your Nuxt App? Before we dive into the details, let's discuss why you might want to dockerize your Nuxt 3 app: Consistency: Docker ensures that your application runs the same way on any machine, eliminating the "works on my machine" problem. Isolation: Each application runs in its own Container, isolated from other applications and their dependencies. Portability: Docker containers can run on any system that supports Docker, making it easy to move applications between environments. Scalability: Docker makes it easier to scale your applications horizontally by running multiple containers. In the root of your Nuxt 3+ application, create a file named DockerfileDockerfile. This file will define the environment and the steps needed to run your application inside a Docker Container. Here's an example DockerfileDockerfile for a Nuxt 3+ application: 1ARG NODE_VERSION=20.14.0 2 3# Create build stage 4FROM node:${NODE_VERSION}-slim AS build 5 6# Enable pnpm 7ENV PNPM_HOME="/pnpm" 8ENV PATH="$PNPM_HOME:$PATH" 9RUN corepack enable 10 11# Set the working directory 12WORKDIR /app 13 14# Copy package.json and pnpm-lock.yaml files to the working directory 15COPY ./package.json /app/ 16COPY ./pnpm-lock.yaml /app/ 17 18## Install dependencies 19RUN pnpm install --shamefully-hoist 20 21# Copy the rest of the application files to the working directory 22COPY . ./ 23 24# Build the application 25RUN pnpm run build 26 27# Create a new stage for the production image 28FROM node:${NODE_VERSION}-slim 29 30# Set the working directory 31WORKDIR /app 32 33# Copy the output from the build stage to the working directory 34COPY --from=build /app/.output ./ 35 36# Define environment variables 37ENV HOST=0.0.0.0 NODE_ENV=production 38ENV NODE_ENV=production 39 40# Expose the port the application will run on 41EXPOSE 3000 42 43# Start the application 44CMD ["node","/app/server/index.mjs"] For more details, check out my blog post: 📗 Read the blog post 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 A Rant about Front-end Development 👉🏻 Front-end development has become unnecessarily complex due to poor choices, such as over-reliance on JavaScript frameworks and ignoring fundamental principles like content importance and CSS capabilities. 📕 The many faces of undefined in JavaScript 👉🏻 JavaScript's many methods of representing unknown values, including null, undefined, falsy values, ReferenceError, empty slots in arrays, -1, and TypeScript's void, causes confusion and defects. 🛠️ Rooster.js 👉🏻 A framework-independent JavaScript rich-text editor neatly nested inside one HTML `div` element. 👉🏻 Editing operations performed by end users are handled in simple ways to generate the final HTML. 🌐 One Million Checkboxes 👉🏻 A website showing one million realtime checkboxes, where checking a box checks it for everyone else on the page. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany