diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js new file mode 100644 index 0000000..f8c00ac --- /dev/null +++ b/docs/.vitepress/config.js @@ -0,0 +1,15 @@ +import { defineConfig } from 'vitepress' + +export default defineConfig({ + title: 'Vue 3D Mockup', + description: '📱 A 3D phone mockup component to showcase your apps', + themeConfig: { + nav: [ + { text: 'Guide', link: '/guide' }, + { text: 'Github', link: 'https://github.com/anatolykopyl/vue-three-d-mockup' } + ], + footer: { + message: 'Released under the GPL-3.0 license.', + } + } +}) diff --git a/src/assets/screen.mp4 b/docs/assets/screen.mp4 similarity index 100% rename from src/assets/screen.mp4 rename to docs/assets/screen.mp4 diff --git a/docs/assets/screen.png b/docs/assets/screen.png new file mode 100644 index 0000000..d066e1c Binary files /dev/null and b/docs/assets/screen.png differ diff --git a/docs/guide.md b/docs/guide.md new file mode 100644 index 0000000..976ad4d --- /dev/null +++ b/docs/guide.md @@ -0,0 +1,191 @@ +# Guide + +## Installation + +```bash +npm install vue-three-d-mockup +``` + +## Usage + + + + + +### Simple example + +`screen.png` is a static asset in the public folder. + +```vue + + + +``` + +### Using assets as the screen + +- #### In vite powered projects + +```vue + + + +``` + +- #### In vue-cli powered projects + +```vue + + + +``` + +### Multiple phones + + + +```vue + + + +``` + +### Video + + + +
+ +
+ +```vue + + + +``` + +## Avaliable props + +| Prop | Type | Required | Default | Description | +| ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `screen` | String \| Element \| Array | `true` | none | Path to an image that will be displayed on the phones screen or the `