chore: add example

Author: pi0

example/README.md

@@ -0,0 +1,31 @@
+# Extend example
+
+This example is using `nuxt-extend` and [nuxt components](https://nuxtjs.org/docs/2.x/features/nuxt-components)
+to create a multi-variant mobile/desktop nuxt application.
+
+- Using [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces) for mono-repo managenment
+- Most of the logic is shared in base package
+- Using two sperate builds ensures that there are no additional dependencies leaked between mobile and desktop variants
+
+## Configuration
+
+- Add any common nuxt module and config to base ([base/nuxt.config](./packages/base/nuxt.config.js))
+- Avoid adding mobile/desktop specific modules, plugins and css
+  - Instead use [desktop/nuxt.config](./packages/desktop/nuxt.config.js) and [mobile/nuxt.config](./packages/mobile/nuxt.config.js)
+
+## Pages
+
+Only top-level `pages/` directory is supported. It is best to always use a named component and implement per-variant.
+
+## Store
+
+Only top-level `store/` directory is supported. It is best to write shared logic inside vuex store modules.
+
+## Layout
+
+Using named components, it can be implemented with `components/AppLayout.vue` per-variant.
+
+## Styles
+
+It is recommended to use scoped styles. But in case that need to use global styles,
+they can be included in layout component or `nuxt.config` of each variant.

example/package.json

@@ -0,0 +1,14 @@
+{
+  "private": "true",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "",
+    "dev:desktop": "nuxt dev packages/mobile",
+    "dev:mobile": "nuxt dev packages/mobile"
+  },
+  "devDependencies": {
+    "nuxt": "^2.14.7"
+  }
+}

example/packages/base/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <AppLayout />
+</template>

example/packages/base/nuxt.config.js

@@ -0,0 +1,6 @@
+import { nuxtConfig } from 'nuxt-extend'
+
+export default nuxtConfig({
+  name: '@app/base',
+  rootDir: __dirname
+})

example/packages/base/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@app/base",
+  "version": "0.0.0",
+  "private": true
+}

example/packages/base/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <AppLanding />
+</template>

example/packages/desktop/components/AppLanding.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <h1>
+      Welcome to desktop version!
+    </h1>
+  </div>
+</template>

example/packages/desktop/components/AppLayout.vue

@@ -0,0 +1,8 @@
+<template>
+  <main>
+    <Nuxt />
+    <footer>
+      <a href="/m/">Mobile Version</a>
+    </footer>
+  </main>
+</template>

example/packages/desktop/nuxt.config.js

@@ -0,0 +1,11 @@
+import { nuxtConfig } from 'nuxt-extend'
+
+console.log(nuxtConfig({
+  name: '@app/desktop',
+  extends: '@app/base/nuxt.config'
+}))
+
+export default nuxtConfig({
+  name: '@app/desktop',
+  extends: '@app/base/nuxt.config'
+})

example/packages/desktop/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@app/desktop",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "analyze": "nuxt build --analyze",
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate"
+  }
+}