This is a fork of https://github.com/ionic-team/tutorial-photo-gallery-vue, and pre-includes the Pinegrow Vite Plugin and other goodies for Vue Designer.
To run on iOS or Android - follow this guide
This is a sample project created using the Vue Designer Ionic - Quick start template.
Demo - https://photo-gallery-ionic-vue.netlify.app/
A desktop visual editor for Vue apps supporting Mac, Windows, and Linux by Pinegrow. Take it for a free trial at Vue Designer!
It lets you visually design ๐จ your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.
It smartly integrates with your โก๏ธ Vite based CLI and provides an amazing developer experience with its powerful visual controls and features.
Clean code ๐, No lock-in - You are in control of your projects and development workflow โค๏ธ
Create a repo from this template on GitHub.
(or)
If you prefer to do it manually with the cleaner git history
npx giget@latest gh:pinegrow/photo-gallery-ionic-vue my-photo-gallery-ionic-vue-app #project-name
cd my-photo-gallery-ionic-vue-app
npm install #or use pnpm
Open your project in Vue Designer and follow the instructions displayed in the Config Panel (that should pop out automatically). Config Panel โ๏ธ displays the key packages and the various links to their individual ecosystems and communities.
npm run dev
npm run build # Hybrid mobile App
Uncomment the rollup-plugin-visualizer
usage in your config file and execute the build
command. This command will generate stats.html
. Open stats.html
in your browser to analyze bundle sizes.
npm run build # open stats.html to analyze bundle sizes
npm run now # build & preview
npm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)
You can deploy this repo as a site on your own to explore and experiment with, by clicking this button.
Check out the deployment documentation for more information.
- Vite - Vite-powered Vue SPA
- ๐ Follow the amazing Vue docs
- ๐ฆ Vue-Router for client-side routing. Expressive, configurable, convenient enables snappy navigation.
- Ionic Vue - @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.
- Ionic Components - Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once youโre familiar with the basics, refer to the API Index for a complete list of each component and sub-component.
- UnoCSS Preset Icons - use over 100,000 open-source Iconify icons. Uses the unocss format for icon names, for example,
i-mdi-home
.
- Pinegrow Vite Plugin - enables you to live-design your Vue single-file components visually in Vue Designer.
- ๐ฒ unplugin-vue-components - On-demand components auto importing for Vue.
- ๐ฒ unplugin-auto-import - Auto import APIs on-demand for Vite, Webpack and Rollup.
- VueUse - collection of essential Vue composition utilities.
- ๐ Pinia stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.
- VeeValidate takes care of value tracking, validation, errors, submissions and more.
- Vite Devtools - A Vite plugin for Vue that enhances your DX (developer experience) with an amazing set of in-app features. This is an in-app alternative to browser-based/standalone Vue Devtools.
- Vue Devtools - Official devtools that can be used as a standalone app alongside Vue Designer. It's conditionally configured in
main.ts
(only during development).- ACTION REQUIRED: Currently deactivated. In
main.ts
, uncomment the top devtools related snippet to activate.
- ACTION REQUIRED: Currently deactivated. In
- Use Composition API with
<script setup>
SFC syntax - ESLint with eslint-plugin-vue - official set of linting rules.
- Prettier with @vue/eslint-config-prettier - format without conflicting with eslint rules.
Allows JS & strict mode is turned off. Update tsconfig.app.json
or tsconfig.ts
as required.
{
"compilerOptions": {
// ...
"strict": false,
"allowJs": true
}
}
Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the "Your First App: Vue" guide. Follow along to create a complete CRUD (create-read-update-delete) experience.
Powered by Ionic Vue (web app) and Capacitor (native app runtime).
After the user navigates to Tab 2 (Photos), they can tap/click on the camera button to open up the device's camera. After taking or selecting a photo, it's stored permanently into the device's filesystem. When the user reopens the app at a later time, the photo images are loaded from the filesystem and displayed again in the gallery. The user can tap on a photo to be presented with the option to remove the photo.
- App framework: Vue
- UI components: Ionic Framework
- Camera button: Floating Action Button (FAB)
- Photo Gallery display: Grid
- Delete Photo dialog: Action Sheet
- Native runtime: Capacitor
- Taking photos: Camera API
- Writing photo to the filesystem: Filesystem API
- Storing photo gallery metadata: Preferences API
- Tab2 (Photos) (
src/pages/Tab2.vue
): Photo Gallery UI and basic logic. - usePhotoGallery Hook (
src/composables/usePhotoGallery.ts
): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.
Note: It's highly recommended to follow along with the tutorial guide, which goes into more depth, but this is the fastest way to run the app.
- Install Ionic if needed:
npm install -g @ionic/cli
. - Clone this repository.
- In a terminal, change directory into the repo:
cd photo-gallery-capacitor-vue
. - Install all packages:
npm install
. - Run on the web:
ionic serve
. - Run on iOS or Android: See here.
- updated to v6 official release, see this branch https://github.com/aaronksaunders/ionicv6-beta-vue-vite-project-1/tree/v6-official
- This template should help get you started developing with Ionic, Vue 3 and Typescript in Vite.
- See more information in this blog post - https://dev.to/aaronksaunders/getting-started-with-vitejs-ionic-framework-beta-v6-and-vuejs-2o8l
- There is also a video here - https://www.youtube.com/watch?v=JnfAH1gXVdU&t=2s
VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService
in settings!
<script setup>
is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).
Since TypeScript cannot handle type information for .vue
imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue
imports (for example to get props validation when using manual h(...)
calls), you can use the following:
Run Volar: Switch TS Plugin on/off
from VSCode command palette.
- Install and add
@vuedx/typescript-plugin-vue
to the plugins section intsconfig.json
- Delete
src/shims-vue.d.ts
as it is no longer needed to provide module info to Typescript - Open
src/main.ts
in VSCode - Open the VSCode command palette
- Search and run "Select TypeScript version" -> "Use workspace version"