Nuxt3 SSR Example with Authorization

Server Side Rendering Nuxt3 with Authorization: Online Demo, API via Laravel.

Features

• SSR Nuxt3 with authorization
• Tailwindcss
• Auth + guest middlewares
• Wrappered useFeatch()
• Test SSR content via Vitest

Installation

// dev
yarn && yarn dev

// prod
yarn && yarn build && yarn preview

Deploy

Deployed via pm2

#!/bin/bash

old_port=3001
new_port=3000

# check which port nuxtjs is running
is_3000_using=$(lsof -t -i:3000)
if [ -n "$is_3000_using" ]; then
    old_port=3000
    new_port=3001
fi

echo "the old port is $old_port, the new will be set on $new_port"

# update .env
sed -i "s/$old_port/$new_port/g" .env

echo ".env updated!"

yarn

echo "yarn installed!"

#build
build=$(yarn build)
if [[ $result =~ "ERR" ]]; then
    echo "--$build"
else
    pm2 start yarn --name "nuxt-$new_port" -- run preview

    echo "yarn preview"

    # update nginx
    sed -i "s/$old_port/$new_port/g" "/etc/nginx/sites-available/laravel-nuxt3.conf"
    service nginx restart

    echo "nginx updated!"

    old_pm2_process=$(pm2 list | grep "nuxt-$old_port")
    if [ -n "$old_pm2_process" ]; then
        pm2 delete "nuxt-$old_port"
    fi

    echo "pm2 updated!"
fi

Todos

• Typescript
• Impove Test Coverage