Shopify App Template Using Vue 🟢

A template for building Shopify apps using Vue.js as the frontend. It is based on the Shopify App Node template.

Getting Started
What is included?
Internationlization
Update Guide
What next?
Screenshots
App Submission
License

Updating Older Versions

Note

Since @shopify/cli: ^3.59 the @shopify/app is bundled with the CLI. You can safely remove the @shopify/app dependency from the root package.json file. this is reflected in shopify-app-vue-template > v1.2.3 you should no longer see npm warnings

Prefer to use GraphQL API for interacting with Shopify. See Migrating From REST to GraphQL

Getting Started

Clone this repository or npx degit Mini-Sylar/shopify-app-vue-template your-app-name
Run npm install in the root directory
Run npm run dev -- --reset to start the configure your app (Initial setup only!)
Run npm run dev to start the app (Subsequent runs)

What is included?

Vue 💚

Vue.js 3.4
Vue Router 4 for single page app routing
Vue i18n for app localization
Pinia for state management
EsLint for static code analysis
Prettier for code formatting

Internationalization 🌍🆕

Adding a new translation

Use Vue i18n for app localization. To add a new language, create a new json file in the Locales Folder folder and add the translations. See i18n.js for setup.
All translatiion files are lazily loaded, meaning only the translations for the current language are loaded.
Default language is what is returned by shopify reading the locale query parameter. If not set, it fallbacks to en.
Vue Router will embed the language in the URL, e.g localhost:3000/en or localhost:3000/zh/about
The template has been localized, see Locales Folder folder. Translations may not be 100% accurate so pull requests are welcome.

Shopify 🛍

AppBridge Plugin for Vue to use Shopify App Bridge actions and components
useAuthenticatedFetch to make authenticated requests to the Shopify API and your backend.
App embedding - Template is setup to embed your app in the Shopify admin.

Storage 💽

Uses SQLite as the db, same as the template see the supported databases.

To use one of these, you need to change your session storage configuration. To help, here’s a list of SessionStorage adapter packages. Storage Drivers

Deployment 🚀

See Deploying shopify apps

What next?

Here are some useful links to get you started:

Screenshots

App Submission

Built an app using this template? Submit it here App submission url

Mini-Sylar/shopify-app-vue-template