@aiareal/frontend_layer

Areal Frontend Layer

Version: 0.2.10

A Nuxt Based Shared Library For Areal Frontend Projects

Getting started • Installation • Configuration • Publish • Integrations • Read More

Getting started

Areal Frontend Layer is a published private package on npm. To Access this project you Should ask your supervisor or manager to grant your access to areal organization.

NPM Authorization

There is a file inside project root directory called bunfig.toml. This is bun configuration file.

Remember to!
Update your bun version to latest (>=1.1.32).

bunfig file content is something like this:

[install.scopes]
"@aiareal" = {
    token = "$NPM_TOKEN",
    url = "https://registry.npmjs.org/",
    username = "aiareal",
    password = "$NPM_PASSWORD",
}

Follow these steps to complete setup:

1. Create .env file in your root directory.
2. Add NPM_TOKEN and NPM_PASSWORD variable to your .env file.
3. To create new npm token:
   • Open your npm account.
   • Open Access Tokens tab.
   • Create a new Granular Access Token.

Installation

Run this command to install dependencies:

bun i
# OR
bun install 

Now you can run your project using:

bun run dev

Publish

• First thing commit and push your changes.
  
• Second thing is update project version on package.json.
• Third thing is to write perfect change log and update docs.

To update project after commeit changes and update package.json, simply run:

bun publish

This process done easily if you do all steps on npm authorization section.

Configuration

Main configuration files are:

nuxt.config.ts

If you don't know anything about how to work with nuxt.config file, please check these links:

• Get starting with nuxt config
• Nuxt config reference
• Config and use layer

There are some important settings in this file we can mention:

Path Logic

As you can see, there is a variable above of configuration:

const currentDir = dirname(fileURLToPath(import.meta.url))

The reason that this is important is that nuxt layer project does not support alias paths. For example:

// ❌ Wrong way
import {map_product_responses} from "~/stores/chat.store"
// ✅ Currect way
import {map_product_responses} from "../stores/chat.store"

So if you want to say a file is somewhere, it's better to user relative paths and forget about aliases (@, ~, ...).

Some other examples in configuration file:

export default defineNuxtConfig({
    css: [
        // I use join to refer to root directory.
        // Kind of absolute file path.
        join(currentDir, "assets/css/main.css"),
    ],

    pinia: {
        storesDirs: [
            // Same here.
            join(currentDir, 'stores')
        ]
    }
})

See some examples in code:

// I use relative path special symbols to reach root dir. 
// I know this is a little painfull, but just accept the logic :)
import type {MESSAGE_LIST_RESPONSE_TYPE, MESSAGE_TYPE} from "../stores/chat.types"
import {map_product_responses} from "../stores/chat.store"

Pinia (Global Stores)

It's important to tell your project that where the stores are going to be:

export default defineNuxtConfig({ 
    pinia: {
        storesDirs: [
            join(currentDir, 'stores')
        ]
    },
})

Also when your using layer in your frontend project, you should add your project specific store path in your project nuxt config:

export default defineNuxtConfig({
    pinia: {
        storesDirs: [
            './stores/'
        ]
    },
})

Vuetify Settings

Areal use Vuetify as base UI library. You can customize its settings using this section:

export default defineNuxtConfig({
    vuetify: {
        moduleOptions: {
            ...
        },
        vuetifyOptions: {
            ...
        }
    }
})

tailwind.config.js

The Tailwind configuration is shared across projects, but Tailwind must be installed in each project using it. Additionally, you need to specify in each project's Tailwind setup to use the global configuration.

/** @type {import("tailwindcss").Config} */
// Import theme from layer
import layerTheme from "@aiareal/frontend_layer/tailwind.config"

export default {
  content: [
    // Render also components inside layer
    "./node_modules/@aiareal/frontend_layer/**/*.{js,vue,ts}",
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ], 
  // Apply theme settings
  theme: layerTheme.theme,
}

Integrations

To use layer in other frontend projects, first you need to do everything you should do in section npm authorization.

After that install layer in your project:

bun i -d @aiareal/frontend_layer

After installation completed successfully, add layer project in your nuxt config:

export default defineNuxtConfig({
    extends: [
        ['@aiareal/frontend_layer']
    ]
})

After another bun i, everything should work well. Remember to config tailwind and pinia too.

Read More

Read more about technical details:

• Assets
• Stores
• Auth
• Components
• Composables
• Plugins
• Types
• Utils