Nuxt Layers Multisite by Filrak - A Nuxt Template

Nuxt Layers Multisite

This template shows how to approach a problem of unifying multiple applications with a sginificant amount of shared functionalities on the UI/feature layer.

Overview

The Nuxt Multisite Inheritance Template is an innovative approach designed for developers looking to streamline the management of multiple applications while capitalizing on shared functionalities. This technique is especially beneficial for scenarios such as multi-brand eCommerce platforms or multi-channel applications like those involving web, mobile, or kiosk setups. By utilizing a single codebase and customizing specific aspects for each site, developers can save time and maintain consistency across their applications.

This template demonstrates how to leverage the power of Nuxt layers for file inheritance, enabling seamless overrides and extensions of functionalities. The architecture aims to accommodate large eCommerce companies with intricate frontend applications efficiently, while still allowing each site to retain its unique identity.

Features

File Inheritance: Effortlessly utilize file inheritance for all Nuxt directories, enabling you to share common components while customizing others based on the specific site needs.
Layer-Specific Features: Easily implement layer-specific components, such as layers/butterfly/components/Product.vue, ensuring that you can tailor experiences within different applications.
Global CSS Overrides: Facilitate global CSS customizations using variables, allowing for consistent styling through assets/css/variables.css.
Dynamic Data Models: Use a single codebase with varying underlying data models from different APIs through normalizers, simplifying data management across all instances.
Easy Deployment: Switch between different sites by simply changing the DEPLOYED_STORE environment variable to the desired folder within the layers directory.
Development Server Setup: Quickly spin up a local development server at http://localhost:3000 for immediate testing and iteration during the development phase.
Production Optimization: Build your application for production with ease and have the option to locally preview the finalized production build before deployment.