Single page vue typescript project with router. It demonstrates simple viewer functionality.
Entry point of application represents src/main.ts file and main component src/App.vue
Components: Viewer - represents 3d viewer with simple controls ("src/components/Viewer.vue") Gallery - represents gallery with several models which can be loaded by the viewer ("src/components/Gallery.vue")
Services: Viewer - creates a singleton instance of service which responses for creating 3d viewer and canvas element. This approach allows to create viewer only once in first initialization of viewer service. ("src/services/viewer.service.ts")
Router: Responses for navigation in vue application
Data: canvas.ts - contains settings of canvas container
Assets: Contains static files used by application
Config: Added alias for occviewer path to tsconfig.json ("aConfig.compilerOptions.paths["occviewer/*"]"). If you have another location of viewer package please change this path.
Added CopyWebpack plugin to vue.config.json. It copies viewer source directories to build directory.
Added "Cross-Origin-Embedder-Policy": "require-corp", "Cross-Origin-Opener-Policy": "same-origin" headers to the dev server config
They are necessary for viewer working in multithreading mode. For production mode also necessary https connection. In other case viewer will work in single threading mode.
Be sure that you have viewer package data please check path ("aConfig.compilerOptions.paths["occviewer/*"]") in tsconfig.json.
instal vue-cli globally
npm install -g @vue/cli
instal required project packages
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Customize configuration See Configuration Reference.