Frequently Asked Questions
Here are answers to commonly asked questions about the Shopify Vue App template.
General Questions
What is the Shopify Vue App template?
This template provides a complete foundation for building Shopify applications using Vue.js. It includes authentication, API integration, internationalization, and webhook handling to accelerate your development process.
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.
What versions of Vue does this template use?
The template uses Vue 3.5 with the Composition API, Vue Router 4, and Pinia for state management.
Development Questions
How do I connect to a database in production?
The template uses SQLite by default for development, but you can easily configure it to use MySQL or PostgreSQL in production by modifying the database configuration in the server directory.
How do I add new GraphQL queries?
Create your GraphQL queries in the src/graphql directory. You can then import and use them in your components with the useShopify composable.
Why am I getting CORS errors during development?
CORS issues during development are usually due to misconfigured hostnames. Ensure that your app URL in the Shopify Partner dashboard matches the URL you're using locally (including the port number).
How do I handle app authentication?
Authentication is handled automatically by the template. It uses Shopify's OAuth flow and session tokens, with all the necessary middleware already configured.
What's the best way to customize the UI?
While the template uses Shopify Polaris components, you can easily create your own components in the src/components directory or modify the existing ones to match your app's design requirements.
Deployment Questions
How do I deploy my app?
The template includes deployment scripts for various platforms. For basic deployment:
- Build your app with
npm run build - Deploy the resulting files to your hosting provider
- Set up the required environment variables
What environment variables do I need in production?
The key variables include:
SHOPIFY_API_KEY: Your Shopify API keySHOPIFY_API_SECRET: Your Shopify API secretHOST: Your production hostname (without protocol)SCOPES: Required Shopify API scopesDATABASE_URL: Your database connection string (if using an external database)
Can I use Docker for deployment?
Yes, the template includes Docker configuration. See the .dockerignore and Dockerfile files for details on containerizing your app.
Troubleshooting
My app won't load in the Shopify admin
Ensure your app's URL is correctly set in the Shopify Partner dashboard and that you've set up the App Proxy correctly if you're using one.
Webhooks aren't being received
Check that your webhook endpoints are publicly accessible and that your server is correctly parsing and validating the webhook requests.
I'm getting "Invalid HMAC" errors
This usually indicates a mismatch between your app's secret key in the code and in the Shopify Partner dashboard. Verify that they match exactly.
Still Need Help?
If your question isn't answered here, check out these resources: