Getting Started

This guide will help you set up and run your Shopify app using the Vue.js template.

Upgrading from v2? If you have an existing v2 app you want to upgrade, please refer to our migration guide for a smooth transition to v3.

Prerequisites

Before you begin, ensure you have:

• Node.js >=18.0.0
• npm or pnpm
• A Shopify Partner account
• Basic knowledge of Vue.js and Shopify app development

Quick Start

1. Clone the repository

   # Option 1: Using degit (recommended)
   npx degit Mini-Sylar/shopify-app-vue-template your-app-name
   
   
   # For typescript
   npx degit Mini-Sylar/shopify-app-vue-template#typescript your-app-name

2. Install dependencies

   cd your-app-name
   npm install

3. Configure your app

   npm run dev:reset

   This will guide you through:

   • Creating a new app in your Shopify Partner dashboard
   • Setting up API credentials
   • Configuring app scopes
   • Setting up development URLs

4. Start development server

   npm run dev

Project Structure

root/
├── client/                 # Frontend Vue app
│   ├── src/
│   │   ├── assets/        # Static assets
│   │   ├── components/    # Vue components
│   │   ├── plugins/       # Vue plugins
│   │   ├── router/        # Vue Router config
│   │   ├── stores/        # Pinia stores
│   │   └── views/         # Page components
│   └── vite.config.js     # Vite configuration
├── server/                 # Backend Node.js app
│   ├── database/          # Database configuration
│   ├── middleware/        # Express middleware
│   ├── routes/            # API routes
│   └── webhooks/          # Webhook handlers
└── shopify.app.toml       # Shopify app configuration

Available Scripts

Command	Description
npm run shopify	Run Shopify CLI commands
npm run build	Build frontend and backend
npm run dev	Start development server
npm run dev:reset	Reset Shopify configuration
npm run dev:webhook	Trigger webhook (use with /api/webhooks)
npm run info	Display app info
npm run generate	Generate theme extension
npm run deploy	Deploy the app
npm run show:env	Show production environment variables
npm run lint	Lint entire project
npm run lint:server	Lint server code
npm run lint:client	Lint client code
npm run format:server	Format server code
npm run format:client	Format client code

Development Workflow

1. Frontend Development

The frontend uses Vue 3 with the Composition API. Key features:

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { storeToRefs } from 'pinia'
import { useProductStore } from '@/stores/products'

// Internationalization
const { t } = useI18n()

// State management
const { products } = storeToRefs(useProductStore())

// Component logic
const isLoading = ref(false)
</script>

2. API Integration

The template provides authenticated API access:

// Fetching data from Shopify
const response = await fetch('/api/products/count')
const data = await response.json()

3. Webhook Development

1. Create webhook handler:

   // web/server/webhooks/product-update.js
   export default {
     PRODUCTS_UPDATE: {
       deliveryMethod: DeliveryMethod.Http,
       callbackUrl: '/api/webhooks',
       callback: async (topic, shop, body) => {
         // Handle webhook
       }
     }
   }

2. Register in Shopify admin

3. Test using npm run dev:webhook

4. Database Operations

Default SQLite setup:

// web/server/database/database.js
import { SQLiteSessionStorage } from '@shopify/shopify-app-session-storage-sqlite'

export const sessionStorage = new SQLiteSessionStorage(DB_PATH)

Configuration

Environment Variables

Development:

• Created automatically by dev:reset
• Stored in .env

Production:

• Required variables:

  SHOPIFY_API_KEY=
  SHOPIFY_API_SECRET=
  SCOPES=
  HOST=

App Bridge Configuration

// web/client/src/plugins/appBridge.js
export const appBridge = window.shopify

Vite Configuration

// web/client/vite.config.js
export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: hmrConfig,
    proxy: proxyOptions
  }
})

Testing

Unit Tests

npm run test:unit

Webhook Tests

npm run dev:webhook

Common Tasks

Adding a New Route

1. Create view component:

   <!-- web/client/src/views/NewView.vue -->
   <template>
     <div>
       {{ $t('NewView.title') }}
     </div>
   </template>

2. Add route:

   // web/client/src/router/index.js
   {
     path: '/new',
     name: 'new',
     component: NewView
   }

Adding an API Endpoint

// web/server/routes/new-route.js
import express from 'express'
const router = express.Router()

router.get('/data', async (req, res) => {
  // Handle request
})

export default router

Next Steps

After setting up your app:

1. Review the Features documentation
2. Learn about Internationalization
3. Check What's New in Version 3.0
4. Read the FAQ for common questions

Getting Help

If you run into issues:

1. Check the FAQ
2. Search GitHub Issues
3. Join our community discussions
4. Contact Support for professional assistance