Nuxt and Layers

Nuxt is a full-stack framework that combines Vue.js and Nitro to create universal applications.

With a few settings, you can swap from a full SSR application to a static application, or even a combination of both. Create full server applications as a replacement of express or koa for instance, or create a full stack application with a single framework, including fully typed code, optimized payload, and more.

It also has out-of-the-box support for a high number of pre configured providers, including Edge Worker, such as Cloudflare Workers, Vercel, Netlify, Firebase, and more.

Useful resources:

• Visit nuxt.com
• Read introduction guide on nuxt.com
• Read pages and layouts guide on nuxt.com

A Nuxt application can grow very fast. You can be multiple developers working on the same application, or you can have multiple applications that share common features.

Layers is a mechanism that allows you to split your application into multiple directories, each with their own nuxt.config.js file. Each directory can be a full Nuxt application, with its own pages, components, plugins, and more.

At the end, all layers are merged together, representing a single application.

In order to keep your application maintainable, you need to organize your code. We help you do that with Nuxt Layers. The code in Apollux does not interfere with your own code, has minimal dependencies, and all features are optional, meaning they won't be loaded if you don't actually use them.

You can also override any component, by creating a component with the same name in your application. This allows you to customize Apollux to your needs, without having to rewrite all the code.

Useful resources:

• Learn more about Layers on nuxt.com

Apollux is a set of Nuxt layers that you can enable depending on your needs.

This creates a Nuxt application that contains only what's actually used. Keep only the layers you need, and remove the ones you don't, so that your application is as light as possible.

It also a great and efficient way for us to provide you with more features and updates, without taking the risk to break your application!

Base layers

• Shuriken UI: @shuriken-ui/nuxt
  This layer provides base components for Apollux, such as buttons, inputs, and cards. It also loads Tailwind CSS, and provides a set of Tailwind CSS components that you can use to style your application.
• Apollux Core (extends from Shuriken UI): layers/apollux
  This layer is required to use Apollux. It provides features for main content in Apollux, such as table components, the panel system, the toaster system, and more.
• Apollux Layout Sidebar: layers/layout-sidebar
  This layer provides a sidebar layout, with a sidebar and a content area. It also provides a sidebar menu component.
• Apollux Layout Collapse: layers/layout-collapse
  This layer provides a collapse layout, with a collapse menu and a content area. It also provides a collapse menu component.

Demo layers

• Demo App: .demo
  This layer is the demo app. It is used to show you how you can use Apollux, with concrete examples.
• Documentation: layers/documentation
  This layer is an optional layer that you can enable to show the documentation. It uses nuxt-content to load the documentation from the markdown files.
• Landing: layers/landing
  This layer contains everyting related to Apollux's landing page. It mainly to demonstrates that you can, and should, split your application into multiple layers.

App layers

• Your app: .app
  This layer is your app. It is the layer that you will use to create your application with Apollux. See it as a Apollux starter app with the bare bones.

Enable layers

To enable a layer, you need to add it to the extends array in your nuxt.config.js file.

In the example below, we load all the layers available in Apollux. (example from the demo)

Sometime you may need to override components used in base layers. Instead of editing them directly, we recommend you to copy them in your .app/components folder and edit them there.

This way, you can still get updates from the base layers without losing your changes.

A good example is to override ApolluxLogo component:

Copy the component from layers/apollux/components/global/ApolluxLogo.vue to .app/components/global/ApolluxLogo.vue