{"id":23684845,"url":"https://github.com/pinegrow/photo-gallery-ionic-vue","last_synced_at":"2026-02-11T17:32:19.949Z","repository":{"id":185787626,"uuid":"674099508","full_name":"Pinegrow/photo-gallery-ionic-vue","owner":"Pinegrow","description":"Photo Gallary Mobile App with Ionic Vue","archived":false,"fork":false,"pushed_at":"2025-01-14T12:57:34.000Z","size":1552,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-19T17:51:34.642Z","etag":null,"topics":["hybrid-apps","ionic","ionic-6","ionic-framework","mobile-app","pinegrow","vite","vue","vue-designer"],"latest_commit_sha":null,"homepage":"https://photo-gallery-ionic-vue.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pinegrow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-08-03T06:25:21.000Z","updated_at":"2025-01-14T12:57:37.000Z","dependencies_parsed_at":"2024-01-31T13:26:41.852Z","dependency_job_id":"b46b70b9-1db3-4fe9-99ea-5c5aca6c96ce","html_url":"https://github.com/Pinegrow/photo-gallery-ionic-vue","commit_stats":null,"previous_names":["pinegrow/photo-gallery-ionic-vue"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Pinegrow/photo-gallery-ionic-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fphoto-gallery-ionic-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fphoto-gallery-ionic-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fphoto-gallery-ionic-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fphoto-gallery-ionic-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pinegrow","download_url":"https://codeload.github.com/Pinegrow/photo-gallery-ionic-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinegrow%2Fphoto-gallery-ionic-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29339604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T16:14:43.024Z","status":"ssl_error","status_checked_at":"2026-02-11T16:14:15.258Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hybrid-apps","ionic","ionic-6","ionic-framework","mobile-app","pinegrow","vite","vue","vue-designer"],"created_at":"2024-12-29T20:48:47.116Z","updated_at":"2026-02-11T17:32:19.934Z","avatar_url":"https://github.com/Pinegrow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ePhoto Gallery Mobile App With Ionic Vue\u003c/h1\u003e\n\u003cbr\u003e\n\n\u003e This is a fork of https://github.com/ionic-team/tutorial-photo-gallery-vue, and pre-includes the [Pinegrow Vite Plugin](https://www.npmjs.com/package/@pinegrow/vite-plugin) and other goodies for Vue Designer.\u003cbr\u003e\u003cbr\u003e\n\n\u003cbr\u003e\n\nTo run on iOS or Android - follow this [guide](https://ionicframework.com/docs/developing/previewing)\n\n\u003cbr\u003e\n\nThis is a sample project created using the [Vue Designer Ionic - Quick start template](https://github.com/pinegrow/pg-ionic-vue).\n\nDemo - https://photo-gallery-ionic-vue.netlify.app/\n\n## Vue Designer\n\nA desktop visual editor for Vue apps supporting Mac, Windows, and Linux by [Pinegrow](https://pinegrow.com/). Take it for a free trial at [Vue Designer](https://vuedesigner.com)!\n\nIt lets you visually design 🎨 your Vue single file components and boosts your productivity and creativity while building your component-based Vue apps.\n\nIt smartly integrates with your ⚡️ [Vite](https://vitejs.dev/) based CLI and provides an amazing developer experience with its powerful visual controls and features.\n\nClean code 😃, No lock-in - You are in control of your projects and development workflow ❤️\n\n## Try it now!\n\n### 1. Clone to local\n\n[Create a repo from this template on GitHub](https://github.com/pinegrow/photo-gallery-ionic-vue/generate).\n\n(or)\n\nIf you prefer to do it manually with the cleaner git history\n\n```bash\nnpx giget@latest gh:pinegrow/photo-gallery-ionic-vue my-photo-gallery-ionic-vue-app #project-name\ncd my-photo-gallery-ionic-vue-app\nnpm install #or use pnpm\n```\n\n## 2. Open in Vue Designer\n\nOpen 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.\n\n## Usage\n\n### Start your development server\n\n```bash\nnpm run dev\n```\n\n### Build\n\n```bash\nnpm run build # Hybrid mobile App\n```\n\n### Analyze\n\nUncomment 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.\n\n```bash\nnpm run build # open stats.html to analyze bundle sizes\n```\n\n### Preview\n\n```bash\nnpm run now # build \u0026 preview\n```\n\n### Lighthouse\n\n```bash\nnpm run unlighthouse # Uses npx unlighthouse from https://unlighthouse.dev/ to run lighthouse on entire site (all pages)\n```\n\n### Deploy to Netlify\n\nYou can deploy this repo as a site on your own to explore and experiment with, by clicking this button.\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/Pinegrow/pg-vue)\n\nCheck out the [deployment documentation](https://vitejs.dev/guide/static-deploy.html#netlify) for more information.\n\n## Pre-packed\n\n### Meta Framework (Vue-based)\n\n- [Vite](https://vitejs.dev/) - Vite-powered Vue SPA\n  - 👉 Follow the amazing Vue [docs](https://vuejs.org/guide/introduction.html)\n  - 🚦 [Vue-Router](https://vuejs.org/guide/introduction.html) for client-side routing. Expressive, configurable, convenient enables snappy navigation.\n\n### UI Frameworks\n\n- [Ionic Vue](https://ionicframework.com/docs/vue/overview) - @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.\n- [Ionic Components](https://ionicframework.com/docs/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](https://ionicframework.com/docs/api) for a complete list of each component and sub-component.\n\n### Icons\n\n- [UnoCSS Preset Icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/) - use over 100,000 open-source [Iconify](https://iconify.design/) icons. Uses the **unocss** format for icon names, for example, `i-mdi-home`.\n\n### Modules/Plugins\n\n- [Pinegrow Vite Plugin](https://www.npmjs.com/package/@pinegrow/vite-plugin) - enables you to live-design your Vue single-file components visually in Vue Designer.\n- 📲 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - On-demand components auto importing for Vue.\n- 📲 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - Auto import APIs on-demand for Vite, Webpack and Rollup.\n- [VueUse](https://vueuse.org/) - collection of essential Vue composition utilities.\n- 🍍 [Pinia](https://pinia.vuejs.org/) stores for global state management. Its light-weight, type-safe, extensible, modular with vue-devtools support.\n- [VeeValidate](https://vee-validate.logaretm.com/v4/) takes care of value tracking, validation, errors, submissions and more.\n\n### Devtools\n\n- [Vite Devtools](https://devtools-next.vuejs.org/guide/vite-plugin) - 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.\n- [Vue Devtools](https://devtools.vuejs.org/guide/installation.html#standalone) - Official devtools that can be used as a standalone app alongside Vue Designer. It's conditionally configured in `main.ts` (only during development).\n  - **ACTION REQUIRED**: Currently deactivated. In `main.ts`, uncomment the top devtools related snippet to activate.\n\n### VS Code Extensions\n\n- [VS Code Extensions](./.vscode/extensions.json)\n  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 `\u003cscript setup\u003e` IDE support\n  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n### Coding Style\n\n- Use Composition API with [`\u003cscript setup\u003e` SFC syntax](https://vuejs.org/guide/scaling-up/sfc.html)\n- [ESLint](https://eslint.org) with [eslint-plugin-vue](https://vuejs.org/guide/scaling-up/tooling.html#linting) - official set of linting rules.\n- [Prettier](https://prettier.io) with [@vue/eslint-config-prettier](https://vuejs.org/guide/scaling-up/tooling.html#formatting) - format without conflicting with eslint rules.\n\n### Typescript\n\nAllows JS \u0026 strict mode is turned off. Update `tsconfig.app.json` or `tsconfig.ts` as required.\n\n```json\n{\n  \"compilerOptions\": {\n    // ...\n    \"strict\": false,\n    \"allowJs\": true\n  }\n}\n```\n\n## Community\n\n- [Vue Designer Community](https://discord.gg/BYp45Nnu5T)\n\n---\n\n# Build Your First Ionic App: Photo Gallery (Ionic Vue and Capacitor)\n\nGet 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](https://ionicframework.com/docs/vue/your-first-app). Follow along to create a complete CRUD (create-read-update-delete) experience.\n\nPowered by [Ionic Vue](https://ionicframework.com/docs/vue/overview) (web app) and [Capacitor](https://capacitorjs.com) (native app runtime).\n\n## How It Works\n\nAfter 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.\n\n## Feature Overview\n\n- App framework: [Vue](https://vuejs.org/)\n- UI components: [Ionic Framework](https://ionicframework.com/docs/components)\n  - Camera button: [Floating Action Button (FAB)](https://ionicframework.com/docs/api/fab)\n  - Photo Gallery display: [Grid](https://ionicframework.com/docs/api/grid)\n  - Delete Photo dialog: [Action Sheet](https://ionicframework.com/docs/api/action-sheet)\n- Native runtime: [Capacitor](https://capacitorjs.com)\n  - Taking photos: [Camera API](https://capacitorjs.com/docs/apis/camera)\n  - Writing photo to the filesystem: [Filesystem API](https://capacitorjs.com/docs/apis/filesystem)\n  - Storing photo gallery metadata: [Preferences API](https://capacitorjs.com/docs/apis/preferences)\n\n## Project Structure\n\n- Tab2 (Photos) (`src/pages/Tab2.vue`): Photo Gallery UI and basic logic.\n- usePhotoGallery Hook (`src/composables/usePhotoGallery.ts`): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.\n\n## How to Run\n\n\u003e Note: It's highly recommended to follow along with the [tutorial guide](https://ionicframework.com/docs/vue/your-first-app), which goes into more depth, but this is the fastest way to run the app.\n\n0. Install Ionic if needed: `npm install -g @ionic/cli`.\n1. Clone this repository.\n2. In a terminal, change directory into the repo: `cd photo-gallery-capacitor-vue`.\n3. Install all packages: `npm install`.\n4. Run on the web: `ionic serve`.\n5. Run on iOS or Android: See [here](https://ionicframework.com/docs/building/running).\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n# Getting Started with ViteJS, Ionic Framework Beta v6 And VueJS\n\n---\n\n- **updated to v6 official release, see this branch**\n  https://github.com/aaronksaunders/ionicv6-beta-vue-vite-project-1/tree/v6-official\n\n---\n\n- This template should help get you started developing with Ionic, Vue 3 and Typescript in Vite.\n- See more information in this blog post - https://dev.to/aaronksaunders/getting-started-with-vitejs-ionic-framework-beta-v6-and-vuejs-2o8l\n- There is also a video here - https://www.youtube.com/watch?v=JnfAH1gXVdU\u0026t=2s\n\n## Recommended IDE Setup\n\n[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!\n\n### If Using `\u003cscript setup\u003e`\n\n[`\u003cscript setup\u003e`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).\n\n## Type Support For `.vue` Imports in TS\n\nSince 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:\n\n### If Using Volar\n\nRun `Volar: Switch TS Plugin on/off` from VSCode command palette.\n\n### If Using Vetur\n\n1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`\n2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript\n3. Open `src/main.ts` in VSCode\n4. Open the VSCode command palette\n5. Search and run \"Select TypeScript version\" -\u003e \"Use workspace version\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinegrow%2Fphoto-gallery-ionic-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinegrow%2Fphoto-gallery-ionic-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinegrow%2Fphoto-gallery-ionic-vue/lists"}