How to Write Clean Vue Components

Table of Contents

Introduction

Writing code that’s both easy to test and easy to read can be a challenge, especially with Vue components. In this blog post, I’m going to share a design idea that will make your Vue components better. This method won’t speed up your code, but it will make it simpler to test and understand. Think of it as a big-picture way to improve your Vue coding style. It’s going to make your life easier when you need to fix or update your components.

Whether you’re new to Vue or have been using it for some time, this tip will help you make your Vue components cleaner and more straightforward.

Understanding Vue Components

A Vue component is like a reusable puzzle piece in your app. Usually, it has three main parts:

1. View: This is the template section where you design the user interface.
2. Reactivity: Here, Vue’s features like ref make the interface interactive.
3. Business Logic: This is where you process data or manage user actions.

Case Study: snakeGame.vue

Let’s look at a common Vue component, snakeGame.vue. It mixes the view, reactivity, and business logic, which can make it complex and hard to work with.

Code Sample: Traditional Approach

<template>
  <div: HTMLAttributes & ReservedPropsdiv HTMLAttributes.class?: anyclass="game-container">
    <canvas: CanvasHTMLAttributes & ReservedPropscanvas ref?: VNodeRef | undefinedref="canvas: HTMLCanvasElement | nullcanvas" CanvasHTMLAttributes.width?: Numberish | undefinedwidth="400" CanvasHTMLAttributes.height?: Numberish | undefinedheight="400"></canvas: CanvasHTMLAttributes & ReservedPropscanvas>
  </div: HTMLAttributes & ReservedPropsdiv>
</template>

<script setup lang="ts">
import { const onMounted: CreateHook<any>onMounted, const onUnmounted: CreateHook<any>onUnmounted, function ref<T>(value: T): [T] extends [Ref] ? IfAny<T, Ref<T>, T> : Ref<UnwrapRef<T>, UnwrapRef<T> | T> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref } from "vue";

const const canvas: Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>canvas = ref<HTMLCanvasElement | null>(value: HTMLCanvasElement | null): Ref<HTMLCanvasElement | null, HTMLCanvasElement | null> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref<HTMLCanvasElement | null>(null);
const 
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx = 
ref<CanvasRenderingContext2D | null>(value: CanvasRenderingContext2D | null): Ref<{
    readonly canvas: HTMLCanvasElement;
    ... 70 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null> (+1 overload)
Takes an inner value and returns a reactive and mutable ref object, which
has a single property `.value` that points to the inner value.
@paramvalue - The object to wrap in the ref.@see{@link https://vuejs.org/api/reactivity-core.html#ref}ref<CanvasRenderingContext2D | null>(null);
let 
let snake: {
    x: number;
    y: number;
}[]snake = [{ x: numberx: 200, y: numbery: 200 }];
let 
let direction: {
    x: number;
    y: number;
}direction = { x: numberx: 0, y: numbery: 0 };
let 
let lastDirection: {
    x: number;
    y: number;
}lastDirection = { x: numberx: 0, y: numbery: 0 };
let 
let food: {
    x: number;
    y: number;
}food = { x: numberx: 0, y: numbery: 0 };
const const gridSize: 20gridSize = 20;
let let gameInterval: number | nullgameInterval: number | null = null;

function onMounted(hook: any, target?: ComponentInternalInstance | null): voidonMounted(() => {
  if (const canvas: Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>canvas.Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>.value: HTMLCanvasElement | nullvalue) {
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: CanvasRenderingContext2D | {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue = const canvas: Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>canvas.Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>.value: HTMLCanvasElementvalue.HTMLCanvasElement.getContext(contextId: "2d", options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null (+4 overloads)
Returns an object that provides methods and properties for drawing and manipulating images and graphics on a canvas element in a document. A context object includes information about colors, line widths, fonts, and other graphic parameters that can be drawn on a canvas.
@paramcontextId The identifier (ID) of the type of canvas to create. Internet Explorer 9 and Internet Explorer 10 support only a 2-D context using canvas.getContext("2d"); IE11 Preview also supports 3-D or WebGL context using canvas.getContext("experimental-webgl");

[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext)getContext("2d");
    function resetFoodPosition(): voidresetFoodPosition();
    let gameInterval: number | nullgameInterval = var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.function setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number (+2 overloads)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/setInterval)setInterval(function gameLoop(): voidgameLoop, 100);
  }
  var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.addEventListener<"keydown">(type: "keydown", listener: (this: Window, ev: KeyboardEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener("keydown", function handleKeydown(e: KeyboardEvent): voidhandleKeydown);
});

function onUnmounted(hook: any, target?: ComponentInternalInstance | null): voidonUnmounted(() => {
  if (let gameInterval: number | nullgameInterval !== null) {
    var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.function clearInterval(id: number | undefined): void (+1 overload)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/clearInterval)clearInterval(let gameInterval: numbergameInterval);
  }
  var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.removeEventListener<"keydown">(type: "keydown", listener: (this: Window, ev: KeyboardEvent) => any, options?: boolean | EventListenerOptions): void (+1 overload)
Removes the event listener in target's event listener list with the same type, callback, and options.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)removeEventListener("keydown", function handleKeydown(e: KeyboardEvent): voidhandleKeydown);
});

function function handleKeydown(e: KeyboardEvent): voidhandleKeydown(e: KeyboardEvente: KeyboardEvent) {
  e: KeyboardEvente.Event.preventDefault(): void
If invoked when the cancelable attribute value is true, and while executing a listener for the event with passive set to false, signals to the operation that caused event to be dispatched that it needs to be canceled.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)preventDefault();
  switch (e: KeyboardEvente.KeyboardEvent.key: string
[MDN Reference](https://developer.mozilla.org/docs/Web/API/KeyboardEvent/key)key) {
    case "ArrowUp":
      if (
let lastDirection: {
    x: number;
    y: number;
}lastDirection.y: numbery !== 0) break;
      
let direction: {
    x: number;
    y: number;
}direction = { x: numberx: 0, y: numbery: -const gridSize: 20gridSize };
      break;
    case "ArrowDown":
      if (
let lastDirection: {
    x: number;
    y: number;
}lastDirection.y: numbery !== 0) break;
      
let direction: {
    x: number;
    y: number;
}direction = { x: numberx: 0, y: numbery: const gridSize: 20gridSize };
      break;
    case "ArrowLeft":
      if (
let lastDirection: {
    x: number;
    y: number;
}lastDirection.x: numberx !== 0) break;
      
let direction: {
    x: number;
    y: number;
}direction = { x: numberx: -const gridSize: 20gridSize, y: numbery: 0 };
      break;
    case "ArrowRight":
      if (
let lastDirection: {
    x: number;
    y: number;
}lastDirection.x: numberx !== 0) break;
      
let direction: {
    x: number;
    y: number;
}direction = { x: numberx: const gridSize: 20gridSize, y: numbery: 0 };
      break;
  }
}

function function gameLoop(): voidgameLoop() {
  function updateSnakePosition(): voidupdateSnakePosition();
  if (function checkCollision(): booleancheckCollision()) {
    function endGame(): voidendGame();
    return;
  }
  function checkFoodCollision(): voidcheckFoodCollision();
  function draw(): voiddraw();
  
let lastDirection: {
    x: number;
    y: number;
}lastDirection = { ...
let direction: {
    x: number;
    y: number;
}direction };
}

function function updateSnakePosition(): voidupdateSnakePosition() {
  for (let let i: numberi = 
let snake: {
    x: number;
    y: number;
}[]snake.Array<{ x: number; y: number; }>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.length - 2; let i: numberi >= 0; let i: numberi--) {
    
let snake: {
    x: number;
    y: number;
}[]snake[let i: numberi + 1] = { ...
let snake: {
    x: number;
    y: number;
}[]snake[let i: numberi] };
  }
  
let snake: {
    x: number;
    y: number;
}[]snake[0].x: numberx += 
let direction: {
    x: number;
    y: number;
}direction.x: numberx;
  
let snake: {
    x: number;
    y: number;
}[]snake[0].y: numbery += 
let direction: {
    x: number;
    y: number;
}direction.y: numbery;
}

function function checkCollision(): booleancheckCollision() {
  return (
    
let snake: {
    x: number;
    y: number;
}[]snake[0].x: numberx < 0 ||
    
let snake: {
    x: number;
    y: number;
}[]snake[0].x: numberx >= 400 ||
    
let snake: {
    x: number;
    y: number;
}[]snake[0].y: numbery < 0 ||
    
let snake: {
    x: number;
    y: number;
}[]snake[0].y: numbery >= 400 ||
    
let snake: {
    x: number;
    y: number;
}[]snake
      .
Array<{ x: number; y: number; }>.slice(start?: number, end?: number): {
    x: number;
    y: number;
}[]
Returns a copy of a section of an array.
For both start and end, a negative index can be used to indicate an offset from the end of the array.
For example, -2 refers to the second to last element of the array.
@paramstart The beginning index of the specified portion of the array.
If start is undefined, then the slice begins at index 0.@paramend The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
If end is undefined, then the slice extends to the end of the array.slice(1)
      .
Array<{ x: number; y: number; }>.some(predicate: (value: {
    x: number;
    y: number;
}, index: number, array: {
    x: number;
    y: number;
}[]) => unknown, thisArg?: any): boolean
Determines whether the specified callback function returns true for any element of an array.
@parampredicate A function that accepts up to three arguments. The some method calls
the predicate function for each element in the array until the predicate returns a value
which is coercible to the Boolean value true, or until the end of the array.@paramthisArg An object to which the this keyword can refer in the predicate function.
If thisArg is omitted, undefined is used as the this value.some(
segment: {
    x: number;
    y: number;
}segment => 
segment: {
    x: number;
    y: number;
}segment.x: numberx === 
let snake: {
    x: number;
    y: number;
}[]snake[0].x: numberx && 
segment: {
    x: number;
    y: number;
}segment.y: numbery === 
let snake: {
    x: number;
    y: number;
}[]snake[0].y: numbery)
  );
}

function function checkFoodCollision(): voidcheckFoodCollision() {
  if (
let snake: {
    x: number;
    y: number;
}[]snake[0].x: numberx === 
let food: {
    x: number;
    y: number;
}food.x: numberx && 
let snake: {
    x: number;
    y: number;
}[]snake[0].y: numbery === 
let food: {
    x: number;
    y: number;
}food.y: numbery) {
    
let snake: {
    x: number;
    y: number;
}[]snake.
Array<{ x: number; y: number; }>.push(...items: {
    x: number;
    y: number;
}[]): number
Appends new elements to the end of an array, and returns the new length of the array.
@paramitems New elements to add to the array.push({ ...
let snake: {
    x: number;
    y: number;
}[]snake[
let snake: {
    x: number;
    y: number;
}[]snake.Array<{ x: number; y: number; }>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.length - 1] });
    function resetFoodPosition(): voidresetFoodPosition();
  }
}

function function resetFoodPosition(): voidresetFoodPosition() {
  
let food: {
    x: number;
    y: number;
}food = {
    x: numberx: var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.floor(x: number): number
Returns the greatest integer less than or equal to its numeric argument.
@paramx A numeric expression.floor(var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.random(): number
Returns a pseudorandom number between 0 and 1.random() * 20) * const gridSize: 20gridSize,
    y: numbery: var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.floor(x: number): number
Returns the greatest integer less than or equal to its numeric argument.
@paramx A numeric expression.floor(var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.random(): number
Returns a pseudorandom number between 0 and 1.random() * 20) * const gridSize: 20gridSize,
  };
}

function function draw(): voiddraw() {
  if (!
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue) return;
  
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function clearRect(x: number, y: number, w: number, h: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clearRect)clearRect(0, 0, 400, 400);
  function drawGrid(): voiddrawGrid();
  function drawSnake(): voiddrawSnake();
  function drawFood(): voiddrawFood();
}

function function drawGrid(): voiddrawGrid() {
  if (!
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue) return;
  
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.
strokeStyle: string | {
    addColorStop: (offset: number, color: string) => void;
} | {
    setTransform: (transform?: DOMMatrix2DInit) => void;
}
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle)strokeStyle = "#ddd";
  for (let let i: numberi = 0; let i: numberi <= 400; let i: numberi += const gridSize: 20gridSize) {
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function beginPath(): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath)beginPath();
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function moveTo(x: number, y: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo)moveTo(let i: numberi, 0);
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function lineTo(x: number, y: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo)lineTo(let i: numberi, 400);
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function stroke(): void (+1 overload)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke)stroke();
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function moveTo(x: number, y: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/moveTo)moveTo(0, let i: numberi);
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function lineTo(x: number, y: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineTo)lineTo(400, let i: numberi);
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function stroke(): void (+1 overload)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke)stroke();
  }
}

function function drawSnake(): voiddrawSnake() {
  if (!
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue) return;
  
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.
fillStyle: string | {
    addColorStop: (offset: number, color: string) => void;
} | {
    setTransform: (transform?: DOMMatrix2DInit) => void;
}
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle)fillStyle = "green";
  
let snake: {
    x: number;
    y: number;
}[]snake.
Array<{ x: number; y: number; }>.forEach(callbackfn: (value: {
    x: number;
    y: number;
}, index: number, array: {
    x: number;
    y: number;
}[]) => void, thisArg?: any): void
Performs the specified action for each element in an array.
@paramcallbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.forEach(
segment: {
    x: number;
    y: number;
}segment => {
    
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue?.function fillRect(x: number, y: number, w: number, h: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect)fillRect(
segment: {
    x: number;
    y: number;
}segment.x: numberx, 
segment: {
    x: number;
    y: number;
}segment.y: numbery, const gridSize: 20gridSize, const gridSize: 20gridSize);
  });
}

function function drawFood(): voiddrawFood() {
  if (!
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | nullvalue) return;
  
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.
fillStyle: string | {
    addColorStop: (offset: number, color: string) => void;
} | {
    setTransform: (transform?: DOMMatrix2DInit) => void;
}
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle)fillStyle = "red";
  
const ctx: Ref<{
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
} | null, CanvasRenderingContext2D | ... 1 more ... | null>ctx.
Ref<{ readonly canvas: HTMLCanvasElement; getContextAttributes: () => CanvasRenderingContext2DSettings; globalAlpha: number; globalCompositeOperation: GlobalCompositeOperation; ... 67 more ...; drawFocusIfNeeded: { ...; }; } | null, CanvasRenderingContext2D | ... 1 more ... | null>.value: {
    readonly canvas: HTMLCanvasElement;
    getContextAttributes: () => CanvasRenderingContext2DSettings;
    globalAlpha: number;
    globalCompositeOperation: GlobalCompositeOperation;
    ... 67 more ...;
    drawFocusIfNeeded: {
        ...;
    };
}value.function fillRect(x: number, y: number, w: number, h: number): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect)fillRect(
let food: {
    x: number;
    y: number;
}food.x: numberx, 
let food: {
    x: number;
    y: number;
}food.y: numbery, const gridSize: 20gridSize, const gridSize: 20gridSize);
}

function function endGame(): voidendGame() {
  if (let gameInterval: number | nullgameInterval !== null) {
    var window: Window & typeof globalThis
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/window)window.function clearInterval(id: number | undefined): void (+1 overload)
[MDN Reference](https://developer.mozilla.org/docs/Web/API/clearInterval)clearInterval(let gameInterval: numbergameInterval);
  }
  function alert(message?: any): void
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/alert)alert("Game Over");
}
</script>

<style>
.game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

Screenshot from the game

Challenges with the Traditional Approach

When you mix the view, reactivity, and business logic all in one file, the component often becomes bulky and hard to maintain. It also becomes difficult to test with unit tests, as you mostly end up doing more complex integration tests.

Introducing the Functional Core, Imperative Shell Pattern

To solve these problems in Vue, we use the “Functional Core, Imperative Shell” pattern. This pattern is key in software architecture and helps you structure your code better:

Functional Core, Imperative Shell Pattern: In this design, the main logic of your app (the ‘Functional Core’) stays pure and without side effects, making it easy to test. The ‘Imperative Shell’ then deals with the outside world, like the UI or databases, and talks to the pure core.

What Are Pure Functions?

In this pattern, pure functions are at the heart of the ‘Functional Core’. A pure function is a concept from functional programming, and it’s special for two reasons:

1. Predictability: If you give a pure function the same inputs, it always gives back the same output.
2. No Side Effects: Pure functions don’t change anything outside them. They don’t alter external variables, call APIs, or do any input/output.

Pure functions are simpler to test, debug, and understand. They are the foundation of the Functional Core, keeping your app’s business logic clean and manageable.

Applying the Pattern in Vue

In Vue, this pattern has two parts:

• Imperative Shell (useGameSnake.ts): This part handles the Vue-specific reactive bits. It’s where your components interact with Vue, managing things like state changes and events.
• Functional Core (pureGameSnake.ts): This is where your pure business logic lives. It’s separate from Vue, which makes it easier to test and think about your app’s main functions, independent of the UI.

Implementing pureGameSnake.ts

The pureGameSnake.ts file encapsulates the game’s business logic without any Vue-specific reactivity. This separation means easier testing and clearer logic.

export const const gridSize: 20gridSize = 20;

interface Position {
  Position.x: numberx: number;
  Position.y: numbery: number;
}

type type Snake = Position[]Snake = Position[];

export function function initializeSnake(): SnakeinitializeSnake(): type Snake = Position[]Snake {
  return [{ Position.x: numberx: 200, Position.y: numbery: 200 }];
}

export function function moveSnake(snake: Snake, direction: Position): SnakemoveSnake(snake: Snakesnake: type Snake = Position[]Snake, direction: Positiondirection: Position): type Snake = Position[]Snake {
  return snake: Snakesnake.
Array<Position>.map<{
    x: number;
    y: number;
}>(callbackfn: (value: Position, index: number, array: Position[]) => {
    x: number;
    y: number;
}, thisArg?: any): {
    x: number;
    y: number;
}[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((segment: Positionsegment, index: numberindex) => {
    if (index: numberindex === 0) {
      return { x: numberx: segment: Positionsegment.Position.x: numberx + direction: Positiondirection.Position.x: numberx, y: numbery: segment: Positionsegment.Position.y: numbery + direction: Positiondirection.Position.y: numbery };
    }
    return { ...snake: Snakesnake[index: numberindex - 1] };
  });
}

export function function isCollision(snake: Snake): booleanisCollision(snake: Snakesnake: type Snake = Position[]Snake): boolean {
  const const head: Positionhead = snake: Snakesnake[0];
  return (
    const head: Positionhead.Position.x: numberx < 0 ||
    const head: Positionhead.Position.x: numberx >= 400 ||
    const head: Positionhead.Position.y: numbery < 0 ||
    const head: Positionhead.Position.y: numbery >= 400 ||
    snake: Snakesnake.Array<Position>.slice(start?: number, end?: number): Position[]
Returns a copy of a section of an array.
For both start and end, a negative index can be used to indicate an offset from the end of the array.
For example, -2 refers to the second to last element of the array.
@paramstart The beginning index of the specified portion of the array.
If start is undefined, then the slice begins at index 0.@paramend The end index of the specified portion of the array. This is exclusive of the element at the index 'end'.
If end is undefined, then the slice extends to the end of the array.slice(1).Array<Position>.some(predicate: (value: Position, index: number, array: Position[]) => unknown, thisArg?: any): boolean
Determines whether the specified callback function returns true for any element of an array.
@parampredicate A function that accepts up to three arguments. The some method calls
the predicate function for each element in the array until the predicate returns a value
which is coercible to the Boolean value true, or until the end of the array.@paramthisArg An object to which the this keyword can refer in the predicate function.
If thisArg is omitted, undefined is used as the this value.some(segment: Positionsegment => segment: Positionsegment.Position.x: numberx === const head: Positionhead.Position.x: numberx && segment: Positionsegment.Position.y: numbery === const head: Positionhead.Position.y: numbery)
  );
}

export function function randomFoodPosition(): PositionrandomFoodPosition(): Position {
  return {
    Position.x: numberx: var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.floor(x: number): number
Returns the greatest integer less than or equal to its numeric argument.
@paramx A numeric expression.floor(var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.random(): number
Returns a pseudorandom number between 0 and 1.random() * 20) * const gridSize: 20gridSize,
    Position.y: numbery: var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.floor(x: number): number
Returns the greatest integer less than or equal to its numeric argument.
@paramx A numeric expression.floor(var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.random(): number
Returns a pseudorandom number between 0 and 1.random() * 20) * const gridSize: 20gridSize,
  };
}

export function function isFoodEaten(snake: Snake, food: Position): booleanisFoodEaten(snake: Snakesnake: type Snake = Position[]Snake, food: Positionfood: Position): boolean {
  const const head: Positionhead = snake: Snakesnake[0];
  return const head: Positionhead.Position.x: numberx === food: Positionfood.Position.x: numberx && const head: Positionhead.Position.y: numbery === food: Positionfood.Position.y: numbery;
}