Nuxt3 Ssr Website

screenshot of Nuxt3 Ssr Website

Nuxt3 Ssr Website

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. ↓


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.


  • 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


  1. Clone the project: git clone
  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.


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.


nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.


Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.


Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.