https://github.com/davestewart/area-51

Nuxt Areas external area demo
https://github.com/davestewart/area-51

architecture nuxt nuxt-areas

Last synced: 30 days ago
JSON representation

Nuxt Areas external area demo

• Host: GitHub
• URL: https://github.com/davestewart/area-51
• Owner: davestewart
• License: mit
• Created: 2021-11-12T17:54:48.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-17T17:15:13.000Z (over 2 years ago)
• Last Synced: 2024-09-13T23:25:22.135Z (2 months ago)
• Topics: architecture, nuxt, nuxt-areas
• Language: Vue
• Homepage:
• Size: 266 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Area 51

> Nuxt Areas external area demo



  



## Overview

[Nuxt Areas](https://github.com/davestewart/nuxt-areas) is a Nuxt module that enables you to structure your Nuxt site by "area":

```

+- src

    +- areas

        +- products

        |   +- ...

        +- users

            +- components

            +- pages

            +- store

```

In addition to local folders, Areas lets you include external areas via path or NPM module.

**This is an installable demo module to show you how it works.**

## Usage

In your Nuxt project, install Nuxt Areas and this package:

```bash

npm i nuxt-areas davestewart/area-51

```

If you don't have a project set up, you can use the main [Nuxt Areas Demo](https://github.com/davestewart/nuxt-areas-demo).

In your project's `nuxt.config.js` set up Areas as a build module, and configure Areas to load the demo area:

```js

export default {

  buildModules: [

    'nuxt-areas',

  ],

  areas: {

    external: [

      {

        src: 'area-51',         // package name 

        route: '/fifty-one',    // route you want to view the pages on

        namespace: 'fiftyOne'   // namespace the store will be registered on

      },

    ]

  }

}

```

Assuming you set up Nuxt Areas OK, everything should run.

To view the installed area in your browser:

- run the project via `npm run dev` 

- navigate to `http://localhost:3000/fifty-one` (or equivalent)