Skip to content

Commit ef86d2b

Browse files
sphinxDevVicsphinxDevVic
committed
docs: add docs website (#2)
1 parent 60e601e commit ef86d2b

17 files changed

+2344
-14
lines changed

‎README.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313

1414
**⚠️ `nuxt-ionic` is currently a work in progress. ⚠️**
1515

16-
- [x] Zero-config required
17-
- [x] Auto-import Ionic components and composables throughout your app
18-
- [x] Ionic Router integration
19-
- [x] Pre-rendering auto-configuration
20-
- [x] Mobile meta tags
21-
- [x] PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
22-
- [x] Works out-of-the-box with Capacitor to build mobile apps
16+
- Zero-config required
17+
- Auto-import Ionic components and composables
18+
- Ionic Router integration
19+
- Pre-render routes
20+
- Mobile meta tags
21+
- PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
22+
- Works out-of-the-box with [Capacitor](https://capacitorjs.com/) to build mobile apps
2323

2424
## Quick setup
2525

‎docs/.env.example

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Create one with no scope selected on https://github.com/settings/tokens/new
2+
# This token is used for fetching the repository releases.
3+
GITHUB_TOKEN=

‎docs/.gitignore

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
node_modules
2+
*.iml
3+
.idea
4+
*.log*
5+
.nuxt
6+
.vscode
7+
.DS_Store
8+
coverage
9+
dist
10+
sw.*
11+
.env
12+
.output

‎docs/components/Logo.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div
3+
class="flex flex-row items-center gap-2 u-text-gray-900 tracking-tight font-extrabold"
4+
>
5+
<svg
6+
width="32"
7+
height="32"
8+
viewBox="0 0 32 32"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
fill-rule="evenodd"
14+
clip-rule="evenodd"
15+
d="M30.4327 9.05578L30.5633 9.36054C31.5211 11.4721 32 13.6925 32 16C32 24.8163 24.8163 32 16 32C7.18367 32 0 24.8163 0 16C0 7.18367 7.18367 0 16 0C18.5905 0 21.0503 0.609524 23.3143 1.7415L23.619 1.89388L23.3578 2.11156C22.7048 2.63401 22.2041 3.28707 21.8776 4.04898L21.7905 4.26667L21.5946 4.17959C19.8313 3.35238 17.9592 2.91701 16 2.91701C8.77279 2.91701 2.91701 8.77279 2.91701 16C2.91701 23.2272 8.77279 29.083 16 29.083C23.2272 29.083 29.083 23.2054 29.083 16C29.083 14.2803 28.7565 12.5823 28.0816 10.9932L27.9946 10.7755L28.2122 10.6884C28.9741 10.4054 29.6707 9.92653 30.215 9.31701L30.4327 9.05578ZM26.4707 9.36057C28.3102 9.36057 29.8014 7.8694 29.8014 6.02996C29.8014 4.19051 28.3102 2.69934 26.4707 2.69934C24.6313 2.69934 23.1401 4.19051 23.1401 6.02996C23.1401 7.8694 24.6313 9.36057 26.4707 9.36057ZM15.9999 8.70754C11.9727 8.70754 8.7074 11.9728 8.7074 16.0001C8.7074 20.0273 11.9727 23.2926 15.9999 23.2926C20.0271 23.2926 23.2924 20.0273 23.2924 16.0001C23.2924 11.9728 20.0271 8.70754 15.9999 8.70754Z"
16+
fill="#5291ff"
17+
></path>
18+
</svg>
19+
nuxt/ionic
20+
</div>
21+
</template>

‎docs/content/1.index.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: 'Get Started'
3+
navigation: false
4+
layout: fluid
5+
---
6+
7+
::block-hero
8+
---
9+
cta:
10+
- Get Started
11+
- /getting-started
12+
secondary:
13+
- Open on GitHub →
14+
- https://github.com/danielroe/nuxt-ionic
15+
snippet: yarn add --dev nuxt-ionic
16+
---
17+
18+
#title
19+
Nuxt/[Ionic]{ .text-primary-500 }
20+
21+
#description
22+
Batteries-included [Ionic](https://ionicframework.com/) integration for Nuxt.
23+
24+
#extra
25+
::list
26+
- Zero-config required
27+
- Auto-import Ionic components and composables
28+
- Ionic Router integration
29+
- Pre-render routes
30+
- Mobile meta tags
31+
- PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
32+
- Works out-of-the-box with [Capacitor](https://capacitorjs.com/) to build mobile apps
33+
::
34+
35+
::

‎docs/content/2.getting-started.md

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: Getting started
3+
description: ''
4+
---
5+
6+
## Installation
7+
8+
Add `nuxt-ionic` to your project's dev dependencies:
9+
10+
::code-group
11+
12+
```bash [yarn]
13+
yarn add --dev nuxt-ionic
14+
```
15+
16+
```bash [npm]
17+
npm install nuxt-ionic -D
18+
```
19+
20+
```bash [pnpm]
21+
pnpm install nuxt-ionic -D
22+
```
23+
24+
::
25+
26+
Then add the module to your Nuxt configuration:
27+
28+
```js{}[nuxt.config.js]
29+
import { defineNuxtConfig } from 'nuxt'
30+
31+
export default defineNuxtConfig({
32+
modules: ['nuxt-ionic']
33+
})
34+
```
35+
36+
You're good to go!
37+
38+
## Options
39+
40+
While not required, you can configure the features that are enabled:
41+
42+
```js
43+
import { defineNuxtConfig } from 'nuxt'
44+
45+
export default defineNuxtConfig({
46+
modules: ['nuxt-ionic'],
47+
ionic: {
48+
integrations: {
49+
//
50+
},
51+
css: {
52+
//
53+
},
54+
},
55+
})
56+
```
57+
58+
### `integrations`
59+
60+
- **meta**
61+
62+
Default: `true`
63+
Disable to take full control of meta tags
64+
65+
- **pwa**
66+
67+
Default: `true`
68+
Disable to take full control of icon generation, manifest and service worker installation
69+
70+
- **router**
71+
72+
Default: `true`
73+
Disable to configure Ionic Router yourself
74+
75+
### `css`
76+
77+
- **core**
78+
79+
Default: `true`
80+
Disable to import these CSS files manually.
81+
82+
- **basic**
83+
84+
Default: `true`
85+
Disable to import these CSS files manually.
86+
87+
- **utilities**
88+
89+
Default: `false`
90+
Enable to add extra Ionic CSS utilities

‎docs/content/3.usage.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Usage
3+
description: ''
4+
---
5+
6+
## Page routing
7+
8+
Out of the box, you can start building your Ionic application with by creating routes within `~/pages` directory. To access the router, you should use `useIonRouter()` rather than an import from `vue-router`.
9+
10+
Nuxt utilities like `definePageMeta` will continue to work, but you likely not try to use `<NuxtPage>` or `<NuxtLayout>`.
11+
12+
::alert
13+
The root component of every page should be the `<ion-page>` component.
14+
::
15+
16+
## Components
17+
18+
All Ionic Vue components should be auto-imported throughout your app. (If you find one that isn't, please open an issue.) Although your IDE should be aware of these everywhere, they are not globally registered and are only imported within the components that use them.
19+
20+
For more on how component imports work, see [the Nuxt documentation](https://v3.nuxtjs.org/guide/directory-structure/components#components-directory).
21+
22+
## Helper functions
23+
24+
Nuxt provides a number of Ionic hooks/composables via auto-imports within your app:
25+
26+
`createAnimation`, `createGesture`, `getPlatforms`, `getTimeGivenProgression`, `iosTransitionAnimation`, `isPlatform`, `mdTransitionAnimation`, `menuController`, `onIonViewWillEnter`, `onIonViewDidEnter`, `onIonViewWillLeave`, `onIonViewDidLeave`, `useBackButton`, `useKeyboard`, `useIonRouter`
27+
28+
For more on what these do, you can read the [Ionic docs](https://ionicframework.com/docs/). For more on how auto-imports work, see [the Nuxt documentation](https://v3.nuxtjs.org/guide/concepts/auto-imports#auto-imports).
29+
30+
## Advanced
31+
32+
### Customising your root `app.vue`
33+
34+
If you need to customise the default Ionic `app.vue` file, you can create a new one in your project's source directory.
35+
36+
This is the default:
37+
38+
```vue [app.vue]
39+
<template>
40+
<div class="md">
41+
<ion-app>
42+
<ion-router-outlet />
43+
</ion-app>
44+
</div>
45+
</template>
46+
```

‎docs/content/4.changelog.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
layout: docs
3+
toc: false
4+
title: Changelog
5+
description: Discover the latest updates.
6+
---
7+
8+
::releases
9+
::

‎docs/content/_theme.yml

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
title: nuxt/ionic
2+
3+
layout: docs
4+
5+
url: "https://ionic.roe.dev/"
6+
7+
description: Batteries-included Ionic integration for Nuxt.
8+
9+
socials:
10+
twitter: "danielcroe"
11+
github: "danielroe/nuxt-ionic"
12+
13+
debug: false
14+
15+
github:
16+
root: docs/content
17+
edit: true
18+
releases: true
19+
20+
header:
21+
title: false
22+
logo: true
23+
24+
footer:
25+
credits:
26+
icon: IconDocus
27+
text: Powered by Docus
28+
href: https://docus.com
29+
icons:
30+
- label: Nuxt
31+
href: https://nuxtjs.org
32+
component: IconNuxt

‎docs/nuxt.config.ts

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { defineNuxtConfig } from 'nuxt'
2+
3+
export default defineNuxtConfig({
4+
extends: ['./node_modules/@docus/docs-theme'],
5+
build: { transpile: [/dist\/runtime/] },
6+
github: {
7+
owner: 'danielroe',
8+
repo: 'nuxt-ionic',
9+
branch: 'main',
10+
},
11+
theme: {},
12+
modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
13+
plausible: {
14+
url: 'ionic.roe.dev',
15+
},
16+
tailwindcss: {
17+
config: {
18+
important: true,
19+
theme: {
20+
extend: {
21+
colors: {
22+
primary: {
23+
'50': '#84c3ff',
24+
'100': '#7ab9ff',
25+
'200': '#70afff',
26+
'300': '#66a5ff',
27+
'400': '#5c9bff',
28+
'500': '#5291ff',
29+
'600': '#4887f5',
30+
'700': '#3e7deb',
31+
'800': '#3473e1',
32+
'900': '#2a69d7',
33+
},
34+
},
35+
},
36+
},
37+
},
38+
},
39+
colorMode: {
40+
preference: 'dark',
41+
},
42+
})

‎docs/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "nuxt-ionic-docs",
3+
"description": "Batteries-included Ionic integration for Nuxt.",
4+
"homepage": "https://github.com/danielroe/nuxt-ionic/",
5+
"scripts": {
6+
"dev": "nuxi dev",
7+
"build": "nuxi build",
8+
"generate": "nuxi build",
9+
"preview": "nuxi preview"
10+
},
11+
"devDependencies": {
12+
"@docus/docs-theme": "npm:@docus/[email protected]",
13+
"@docus/github": "npm:@docus/[email protected]",
14+
"nuxt": "^3.0.0-rc.4",
15+
"vue-plausible": "^1.3.1"
16+
},
17+
"resolutions": {
18+
"@vercel/nft": "0.18.2"
19+
}
20+
}

‎docs/public/favicon.ico

11.8 KB
Binary file not shown.

‎docs/public/icon.png

50.9 KB
Loading

‎docs/tsconfig.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "./.nuxt/tsconfig.json"
3+
}

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
"dev": "nuxi dev playground",
3737
"dev:build": "nuxi build playground",
3838
"dev:prepare": "pnpm nuxt-module-build --stub && nuxi prepare playground",
39+
"docs:dev": "nuxi dev docs",
40+
"docs:build": "nuxi generate docs",
3941
"lint": "pnpm lint:all:eslint && pnpm lint:all:prettier",
4042
"lint:all:eslint": "pnpm lint:eslint --ext .ts,.js,.mjs,.cjs .",
4143
"lint:all:prettier": "pnpm lint:prettier \"{src,test}/**/*.{js,json,ts}\"",

0 commit comments

Comments
 (0)