Frequently Asked Questions

General Questions

What is the Shopify Vue App template?

This template provides a comprehensive foundation for building Shopify applications using Vue.js 3.5. It includes authentication, API integration, internationalization, and webhook handling, all preconfigured to work seamlessly together.

Is this an official Shopify template?

No, this is a community-built template that extends Shopify's official Node.js template by adding a Vue.js frontend and additional features. It follows all Shopify's best practices and guidelines.

What versions of Vue does this template use?

The template uses:

• Vue 3.5 with the Composition API
• Vue Router 4.x for routing
• Pinia for state management
• Vue i18n for internationalization

Development Questions

How do I connect to a database in production?

The template uses SQLite by default for development, but switching to MySQL or PostgreSQL in production is straightforward:

For MySQL:

import { MySQLSessionStorage } from '@shopify/shopify-app-session-storage-mysql'

// In shopify.js
sessionStorage: process.env.NODE_ENV === 'production'
  ? MySQLSessionStorage.withCredentials(
      process.env.DATABASE_HOST,
      process.env.DATABASE_SESSION,
      process.env.DATABASE_USER,
      process.env.DATABASE_PASSWORD,
      { connectionPoolLimit: 100 }
    )
  : new SQLiteSessionStorage(DB_PATH)

For PostgreSQL:

import { PostgreSQLSessionStorage } from '@shopify/shopify-app-session-storage-postgresql'

sessionStorage: PostgreSQLSessionStorage.withCredentials(
  process.env.DATABASE_HOST,
  process.env.DATABASE_SESSION,
  process.env.DATABASE_USER,
  process.env.DATABASE_PASSWORD
)

How do I add new GraphQL queries?

1. Create your queries in src/graphql/ directory
2. Use the Shopify GraphiQL app to test your queries
3. Implement them in your components:

const client = new shopify.api.clients.Graphql({ session })
const response = await client.request(YOUR_QUERY)

How do I handle app authentication?

Authentication is handled automatically through:

1. Shopify OAuth flow
2. Session tokens
3. App Bridge authentication

All middleware is preconfigured - you typically don't need to modify this unless you have custom requirements.

What's the best way to customize the UI?

The template provides several approaches:

1. Create custom components in src/components/
2. Modify existing components to match your design
3. Use CSS variables for theming:

   :root {
     --primary-color: #your-brand-color;
     --secondary-color: #your-secondary-color;
   }

How do I implement billing?

Enable billing by configuring the billingConfig in shopify.js:

const billingConfig = {
  'My Shopify Charge': {
    amount: 5.0,
    currencyCode: 'USD',
    interval: BillingInterval.Every30Days
  }
}

How do I add new webhooks?

1. Define your webhook handler in web/server/webhooks/:

export default {
  YOUR_WEBHOOK_TOPIC: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: '/api/webhooks',
    callback: async (topic, shop, body) => {
      // Your webhook logic
    }
  }
}

2. Register it in your app's admin dashboard

How do I resolve CORS errors during development?

CORS issues usually arise from:

1. Misconfigured hostnames
2. Incorrect app URL in Shopify Partners dashboard
3. Missing proxy settings

To resolve:

1. Verify your shopify.app.toml configuration
2. Ensure dev domain matches preview URL
3. Check proxy settings in vite.config.js
4. Run npm run dev:reset followed by npm run deploy

How do I manage environment variables?

1. Development:

   • Use .env file for local development
   • Run npm run dev:reset to configure app

2. Production:

   • Run npm run show:env to get required variables
   • Set them in your hosting platform:

     SHOPIFY_API_KEY=<your_key>
     SHOPIFY_API_SECRET=<your_secret>
     SCOPES=<your_scopes>
     HOST=<your_host>

How do I deploy to production?

Multiple deployment options are available:

1. Using Docker:

docker build --build-arg SHOPIFY_API_KEY=<key> \
            --build-arg SHOPIFY_API_SECRET=<secret> \
            --build-arg SCOPES=<scopes> \
            --build-arg HOST=<host> \
            -t your-app-name .

2. Traditional Hosting:

   • Build frontend: npm run build
   • Set environment variables
   • Start server: npm run serve

3. Platform Specific:

   • Heroku: Use the provided Procfile
   • Render: Use build.sh script
   • Digital Ocean: Use App Platform configuration

Still Need Help?

Join our community or reach out to our contributors:

1. Open an issue on GitHub
2. Check our documentation
3. Contact us for professional support