Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ax2inc/multisite-module
Multisite features for your Nuxt project
https://github.com/ax2inc/multisite-module
module multisite nuxt
Last synced: about 2 months ago
JSON representation
Multisite features for your Nuxt project
- Host: GitHub
- URL: https://github.com/ax2inc/multisite-module
- Owner: ax2inc
- License: mit
- Archived: true
- Created: 2018-09-07T19:03:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-18T15:46:35.000Z (over 6 years ago)
- Last Synced: 2024-02-27T07:00:24.959Z (11 months ago)
- Topics: module, multisite, nuxt
- Language: JavaScript
- Size: 90.8 KB
- Stars: 6
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
> The project has moved to [https://github.com/ax2inc/nuxt-modules/tree/master/packages/multisite](https://github.com/ax2inc/nuxt-modules/tree/master/packages/multisite)
# multisite-module
[](https://npmjs.com/package/@ax2/multisite-module)
[](https://npmjs.com/package/@ax2/multisite-module)
[](https://circleci.com/gh/ax2inc/multisite-module)
[](https://codecov.io/gh/ax2inc/multisite-module)
[](https://david-dm.org/ax2inc/multisite-module)
[](https://github.com/airbnb/javascript)
> Multisite features for your Nuxt project
[📖 **Release Notes**](./CHANGELOG.md)
## Features
This module helps you bring multisite features to your Nuxt project. Here are the main features:
- Current site detection based on host (or query string in development)
- Contextual CSS vars declaration for site-specific theming
- Contextual meta data
## Setup
- Install the module with your favorite package manager.
```sh
yarn add @ax2/multisite-module
# Or npm i @ax2/multisite-module
```
- Add `@ax2/multisite-module` to `modules` section of `nuxt.config.js`.
```js
// nuxt.config.js
{
modules: [
'@ax2/multisite-module',
],
}
```
- Configure the module as needed by adding a `multisite` key to `nuxt.config.js`.
```js
// nuxt.config.js
{
multisite: {
// Module options
}
}
```
## Options
### debug
- Type: `Boolean`
- **Default**: `false`
Set this to `true` to force the module to get the current site from the query string.
### sites
- Type: `Array`
List of sites.
```js
{
multisite: {
sites: [
{
id: 'my-site',
title: 'My awesome site',
isDefault: true,
hostPatterns: 'myawesomesite\.com,myincrediblesite\.(com|org)',
cssVars: {
'--primary-color': '#41B883',
'--secondary-color': '#3B8070',
},
head: {
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/my-site/favicon.ico' },
],
},
},
],
},
}
```
Each item in `sites` can have a few options of its own:
#### id
- Type: `Integer|String`
The site's unique identifier.
#### isDefault
- Type: `Boolean`
Wether this site should be considered as the default one. Any request that cannot be resolved to one of the sites will fallback to the default one.
#### hostPatterns
- Type: `String`
A list of comma-separated patterns to test against requests host in order to enable this site in production.
#### cssVars
- Type: `Object`
CSS vars that should be set when visiting this site.
#### head
- Type: `Object`
This is the same as Nuxt's [head property](https://nuxtjs.org/api/configuration-head#the-head-property), options defined here are merged with the main `head` property definition.
> NOTE: Functions are not supported here
## Usage
### Development
In development, switch from one site to another by adding a `site` query parameter to the URL. The value should be the site's ID as defined in the module's configuration. ie: [http://127.0.0.1:8080/?site=my-site](http://127.0.0.1:8080/?site=my-site)
Active site is stored in a cookie, so next time you visit [http://127.0.0.1:8080](http://127.0.0.1:8080), active site will be last used one.
### Production
In production, active site is detected by matching request host against the patterns you defined in `hostPatterns` options. ie if you visit [http://myawesomesite.com](http://myawesomesite.com), `my-site` will be set as active site.
A `$multisite` property is added to the app's context, it contains a few helpers that you can use in any component.
### Properties
#### site
- Type: `Object`
The `site` property contains current site's configuration. You could use it to display the current site's title:
```vue
{{ $multisite.site.title }}
```
### Methods
#### asset
- Arguments
- `{String} path`: required
- `{Integer|String} site`: optional, defaults to current site ID
- Return: `String`
Get an asset's path for given site. If no site is specified, defaults to active site.
```vue
![]()
```
> NOTE: It's recommended that you place site-specific assets in a directory named after the site's ID as defined in the module's options. Sites assets directories should be in the static/ directory.
## License
[MIT License](./LICENSE)
Copyright (c) Ax2 Inc.