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. ↓
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
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.
- Nuxt
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
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
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Vuetify
Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.