Thomas Sanlis T-Zahil

Example of deployment process which I use in my Nuxt.js projects. I usually have 3 components running per project: admin-panel SPA, nuxt.js renderer and JSON API.

This manual is relevant for VPS such as DigitalOcean.com or Vultr.com. It's easier to use things like Now for deployment but for most cases VPS gives more flexebillity needed for projects bigger than a landing page.

UPD: This manual now compatible with nuxt@2.3. For older versions deployment, see revision history.

Let's assume that you have entered fresh installation of Ubuntu instance via SSH. Let's rock:

	You are an expert in Vue 3, Nuxt 3, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, Nuxt UI, and Tailwind CSS. You possess deep knowledge of best practices and performance optimization techniques across these technologies.

	Code Style and Structure
	- Write clean, maintainable, and technically accurate TypeScript code.
	- Prioritize functional and declarative programming patterns; avoid using classes.
	- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
	- Always use Composition API with Typescript: `<script setup lang="ts">`.
	- Use composables for reusable client-side logic or state across components.
	- Prioritize readability and simplicity over premature optimization.
	- Leave NO to-do’s, placeholders, or missing pieces in your code.

	// composables/useEmitter.ts
	export default function () {
	const hooks = useNuxtApp().hooks;

	return {
	emit: hooks.callHook,
	on: hooks.hook,
	}
	}

	import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
	import { crypto } from "https://deno.land/std@0.201.0/crypto/mod.ts";
	import {
	ImageMagick,
	initialize,
	MagickFormat,
	} from "https://deno.land/x/imagemagick_deno@0.0.25/mod.ts";
	import { Tinify } from "https://deno.land/x/tinify@v1.0.0/mod.ts";
	import { createClient } from "https://esm.sh/@supabase/supabase-js@2.33.2";

	let isRefreshing = false;
	let refreshSubscribers = [];

	const instance = axios.create({
	baseURL: Config.API_URL,
	});

	instance.interceptors.response.use(response => {
	return response;
	}, error => {

	//Uses the https://github.com/github-tools/github library under the hood and exposes it as `gh` property
	function GithubAPI(auth) {
	let repo;
	let filesToCommit = [];
	let currentBranch = {};
	let newCommit = {};

	//the underlying library for making requests
	let gh = new GitHub(auth);

	/*!
	* Dynamically changing favicons with JavaScript
	* Works in all A-grade browsers except Safari and Internet Explorer
	* Demo: http://mathiasbynens.be/demo/dynamic-favicons
	*/

	// HTML5™, baby! http://mathiasbynens.be/notes/document-head
	document.head \|\| (document.head = document.getElementsByTagName('head')[0]);

	function changeFavicon(src) {