Tailwind Resources Logo Tailwind Resources
Nuxt3 Ssr Website screenshot

Nuxt3 Ssr Website

Author Avatar Theme by Adamlove01
Updated: 9 Mar 2024
22 Stars

An SSR website using Nuxt3, Vuetify3, Pinia, Tailwind, Knexjs and Joi validation. You can use it as a template to build your own website. Please check out the demo link below. ↓

Github Live Preview

Categories

Nuxt Scss Vuetify

Overview:

The Nuxt3 SSR Website is a secure and production-ready website featuring light and dark modes, full translation capabilities, route guards, mobile-friendly menus, login functionality with JWT server-side HTTPS-only, an admin page with user management, security validation practices, shared code between the client and server, and clear code with customization options.

Features:

  • Themes: Light and dark mode options
  • Full Translation: All text available in /locales folder
  • Route Guards: Client and server middleware for routes and roles
  • Nav: Mobile-friendly menu navigation
  • Login: JWT server-side HTTPS-only authentication
  • Admin Page: Users table with CRUD functionality
  • Security: Validation of all input on client and server side
  • Shared Code: Common code between client and server for validation, authorization, translation, and schemas

Installation:

  1. Clone the project: git clone https://github.com/adamlove01/nuxt3-ssr-website.git
  2. Move to the project directory: cd nuxt3-ssr-website
  3. Install dependencies: npm install
  4. Set up a local database:
    • Install a compatible database (Postgres, MSSQL, MySQL, MariaDB, Oracle, or Amazon Redshift) on your local machine.
    • For example, to set up Postgres on macOS using brew:
      • brew install postgres
      • brew services start postgresql
      • Create a database, user, grant privileges, and exit psql.
  5. Install Node.js database driver:
    • For example, if using MySQL:
      • Uninstall ‘pg’: npm uninstall pg
      • Install ‘mysql’: npm install mysql
  6. Create an .env file:
    • Define environment variables: touch .env
    • Add database connection information and TOKEN_AUTH_SECRET.
  7. Run database migrations and seeds.

Summary:

The Nuxt3 SSR Website is a feature-rich project built using Nuxt.js with components like Nitro, Vuetify, Pinia, Knex.js, Joi Validation, and TailwindCSS. It offers a secure and efficient website setup with a focus on security, user access control, and data validation while providing easy customization options. With clear code structure and detailed setup instructions, users can quickly get started with this website template.