What's Included

The Shopify Vue App template is a comprehensive solution that combines Vue.js and Shopify's infrastructure to help you build powerful e-commerce applications.

Vue.js Ecosystem 💚

This template leverages the latest Vue.js technologies:

• Vue.js 3.5 - The progressive JavaScript framework with Composition API
• Vue Router 4 - Official router with improved TypeScript support
• Vue i18n - Built-in internationalization with locale switching
• Pinia - Type-safe state management with DevTools support

Backend Architecture

The server is built with a clean, modular architecture:

server/
├── database/           # Database configuration and migrations
│   ├── sqlite/        # Default SQLite setup for development
│   └── migrations/    # Database schema updates
├── middleware/         # Express middlewares
│   ├── auth/          # Authentication middleware
│   └── user/          # User session handling
├── models/            # Data models and schemas
├── routes/            # API endpoint definitions
│   ├── products.js    # Product management endpoints
│   └── webhooks.js    # Webhook handling routes
├── services/          # Business logic and external services
│   └── shopify/       # Shopify API integrations
├── utils/             # Helper functions and utilities
├── webhook/           # GDPR and app uninstallation handlers
├── index.js          # Application entry point
└── shopify.js        # Shopify App configuration

Frontend Features

1. Authentication & API Access

• Automatic session management with Shopify
• Built-in authenticated fetch for API calls
• App Bridge integration for Shopify Admin features

2. User Interface

• Modern component architecture
• Responsive layouts out of the box
• Dark/Light theme support
• Customizable UI components

3. State Management

• Pinia stores for global state
• Type-safe actions and mutations
• Persistent storage options
• DevTools integration

4. Routing & Navigation

• Vue Router with TypeScript support
• Guard-protected routes
• Dynamic route handling
• Authentication flow integration

5. Developer Experience

• Hot Module Replacement (HMR)
• ESLint and Prettier configuration
• TypeScript support
• Comprehensive npm scripts

Shopify Integration

1. API Access

• GraphQL query support with examples
• REST API compatibility
• Rate limiting handling
• Error management

2. App Bridge Features

• Admin API communication
• UI/UX consistency with Shopify
• Toast notifications
• Modal management

3. Webhook Management

• Automated webhook registration
• GDPR compliance handlers
• User data management
• App uninstallation flow

4. Session Handling

• Secure session management
• Multiple database options
  • SQLite (default for development)
  • MySQL support
  • PostgreSQL support
• Session persistence

Development Features

1. Local Development

• Development server with HMR
• Automatic HTTPS
• Proxy configuration
• Environment management

2. Testing & Quality

• ESLint configuration
• Prettier code formatting
• Type checking
• Error boundary handling

3. Build & Deployment

• Production build optimization
• Docker support
• Multiple deployment options
• Environment variable management

4. Internationalization

• Multiple language support
• Dynamic locale switching
• Translation management
• RTL support ready

Database Support

• Development: SQLite for quick setup
• Production Options:
  • MySQL with connection pooling
  • PostgreSQL with type safety
  • Custom database adapters
• Session Storage: Configurable session storage strategies

Security Features

• CORS protection
• CSRF token handling
• Secure cookie management
• Rate limiting
• Input validation
• XSS protection

Next Steps

After exploring these features, you might want to:

1. Check out the internationalization guide
2. Learn about deployment options
3. Review what's new in the latest version