├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── screenshot.png ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── MindarViewer.vue ├── main.js └── style │ └── index.css └── vue.config.js /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | 7 | workflow_dispatch: 8 | 9 | jobs: 10 | build-and-deploy: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | - uses: actions/setup-node@v2 16 | with: 17 | node-version: '16.x' 18 | 19 | # Install Vue CLI 20 | - name: Install Vue CLI 21 | run: npm install -g @vue/cli 22 | 23 | # Install dependencies 24 | - name: Install dependencies 25 | run: yarn install 26 | 27 | # Build application 28 | - name: Build 29 | run: yarn build 30 | 31 | # Deploy built application to GitHub pages branch 32 | - name: Deploy to GitHub Pages 33 | run: | 34 | git config user.name github-actions 35 | git config user.email github-actions@github.com 36 | git checkout --orphan gh-pages 37 | git --work-tree dist add --all 38 | git --work-tree dist commit -m 'Deploy' 39 | git push origin HEAD:gh-pages --force 40 | rm -r dist 41 | git checkout -f main 42 | git branch -D gh-pages 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | yarn.lock 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 example with MindAR 2 | 3 | This is an example project of using [MindAR](https://github.com/hiukim/mind-ar-js) in Vue 3 4 | 5 | # Screenshot 6 | ![screenshot](https://raw.githubusercontent.com/thauska/mind-ar-js-vue/main/screenshot.png) 7 | 8 | # It demonstrates: 9 | 10 | 1. how to import MindAR as a npm package 11 | 2. how to create a component for MindAR in Vue 3 12 | 13 | # To run 14 | ``` 15 | yarn install 16 | ``` 17 | 18 | ``` 19 | yarn serve 20 | ``` 21 | 22 | ### Customize configuration 23 | See [Configuration Reference](https://cli.vuejs.org/config/). 24 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mind-ar-js-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "aframe": "^1.3.0", 12 | "core-js": "^3.6.5", 13 | "mind-ar": "^1.1.3", 14 | "vue": "^3.0.0" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "~4.5.0", 18 | "@vue/cli-plugin-eslint": "~4.5.0", 19 | "@vue/cli-service": "~4.5.0", 20 | "@vue/compiler-sfc": "^3.0.0", 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^6.7.2", 23 | "eslint-plugin-vue": "^7.0.0" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/vue3-essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thauska/mind-ar-js-vue/8411d62d4e0ae4514d3b447c04171f2e8e7b2432/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thauska/mind-ar-js-vue/8411d62d4e0ae4514d3b447c04171f2e8e7b2432/screenshot.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 41 | 42 | 55 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thauska/mind-ar-js-vue/8411d62d4e0ae4514d3b447c04171f2e8e7b2432/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/MindarViewer.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 51 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | import './style/index.css' 5 | 6 | const app = createApp(App) 7 | app.mount('#app') -------------------------------------------------------------------------------- /src/style/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' 3 | ? '/mind-ar-js-vue' 4 | : '/', 5 | chainWebpack: config => { 6 | config.module 7 | .rule('vue') 8 | .use('vue-loader') 9 | .tap(options => ({ 10 | ...options, 11 | compilerOptions: { 12 | // a-frame components 13 | isCustomElement: tag => tag.startsWith('a-') 14 | } 15 | })) 16 | } 17 | } 18 | --------------------------------------------------------------------------------