Mini-Sylar / shopify-app-vue-template

Create a shopify app with node and vue 3

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
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

UPDATE Guide (v.1.0.x to v.1.1.x)

It seems Shopify has decided to fully deprecate the React Template. It's no longer available in the Shopify CLI. Meaning we no longer have to match the React template version.

As at April 2024 Shopify has also deprecated a lot of the old APIs, Sadly, ProductCreate was also affected

It is now recommended to use Shopify GraphQL API for interacting with Shopify. See Migrating From REST to GraphQL

To update your app to the latest version of the template, follow the steps below:

1. Update Dependencies

HINT: You can you use npm-check-updates to speed this up

• Update the shopify app and cli to the latest version in Root package.json

"dependencies": {
    "@shopify/app": "^3.58.2",
    "@shopify/cli": "^3.58.2"
  }

• Update dependencies in web folder web/package.json

 "dependencies": {
    "@shopify/shopify-app-express": "^4.1.4",
    "@shopify/shopify-app-session-storage-sqlite": "^3.0.3",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "serve-static": "^1.15.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.0",
    "prettier": "^3.2.5",
    "pretty-quick": "^4.0.0"
  }

• Optional: Update dependencies in web/frontend folder web/frontend/package.json

"dependencies": {
    "@shopify/app-bridge": "^3.7.10",
    "pinia": "^2.1.7",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.10.1",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^9.0.0",
    "eslint-plugin-vue": "^9.24.1",
    "prettier": "^3.2.5",
    "vite": "^5.2.8"
  }

2. Update Imports

• In Shopify.js update the import to use the new shopify APis

// other imports
import { SQLiteSessionStorage } from "@shopify/shopify-app-session-storage-sqlite";
import { restResources } from "@shopify/shopify-api/rest/admin/2024-04";

3. Optional

If using the ProductCreate mutation, See Migrating From REST to GraphQL for the new way to create products, there's an example in PRODUCTCREATE