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.

Table of Contents

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

Updating Older Versions

See UPDATE GUIDE for updating from older versions of the template. Prefer to use GraphQL API for interacting with Shopify. See Migrating From REST to GraphQL

Getting Started

1. Clone this repository or npx degit Mini-Sylar/shopify-app-vue-template your-app-name
2. Run npm install in the root directory
3. Run npm run dev -- --reset to start the configure your app (Initial setup only!)
4. 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:

• Build An Example App

• Shopify App Readme

• Vue.js

• Pinia

• Vue Router

Screenshots

App Submission

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

[!NOTE] Since @shopify/cli: ^3.59 the @shopify/app is bundled with the CLI. You can use the CLI to create a new app with the template. You can safely remove the @shopify/app package from the package.json file. this is reflected in shopify-app-vue-template > v1.2.3 you should no longer see npm warnings