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:
- Clone the project:
git clone https://github.com/adamlove01/nuxt3-ssr-website.git - Move to the project directory:
cd nuxt3-ssr-website - Install dependencies:
npm install - 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 postgresbrew services start postgresql- Create a database, user, grant privileges, and exit psql.
- Install Node.js database driver:
- For example, if using MySQL:
- Uninstall ‘pg’:
npm uninstall pg - Install ‘mysql’:
npm install mysql
- Uninstall ‘pg’:
- For example, if using MySQL:
- Create an .env file:
- Define environment variables:
touch .env - Add database connection information and TOKEN_AUTH_SECRET.
- Define environment variables:
- 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.