Shopify Vue App

Appearance

What's New in Version 3.0 ​

Version 3.0 of the Shopify Vue App template introduces significant improvements and modern features to enhance your app development experience.

Upgrading from v2? Check out our complete migration guide for step-by-step instructions.

Major Updates ​

Framework & Dependencies ​

  • Upgraded to Vue 3.5 with improved performance
  • Updated to Vite 6 with faster builds
  • Latest Shopify API libraries (2024-01)
  • All npm packages upgraded to latest versions
  • TypeScript 5.8 support

Development Experience ​

  • Improved HMR performance
  • Better error handling with detailed messages
  • Enhanced debugging capabilities
  • New ESLint flat config
  • Project-wide Prettier configuration

Authentication & API ​

  • Simplified authentication flow
  • Built-in authenticated fetch by default
  • Improved session management
  • Enhanced App Bridge integration
  • Better TypeScript type definitions

Database & Backend ​

  • New database migration system
  • Improved SQLite configuration
  • Added PostgreSQL templates
  • Enhanced MySQL support
  • Better webhook validation

New Features ​

1. Authenticated Fetch ​

js
// Old way
import { useAuthenticatedFetch } from '@/services/useAuthenticatedFetch'
const fetch = useAuthenticatedFetch()

// New way - Authentication handled automatically
const response = await fetch('/api/products')

2. Enhanced Type Safety ​

  • Full TypeScript support across frontend and backend
  • Improved type definitions for Shopify APIs
  • Better IDE integration
  • Runtime type checking

3. Improved Routing ​

  • Dynamic route handling
  • Better navigation guards
  • Enhanced error pages
  • Automatic authenticated routes

4. State Management ​

  • New Pinia stores structure
  • Better state persistence
  • Improved dev tools integration
  • TypeScript store definitions

5. Development Tooling ​

  • New npm scripts for common tasks
  • Better deployment workflows
  • Enhanced testing setup
  • Improved documentation

Performance Improvements ​

1. Build Optimization ​

  • Faster development builds
  • Smaller production bundles
  • Better code splitting
  • Improved asset optimization

2. Runtime Performance ​

  • Faster page loads
  • Better memory management
  • Reduced bundle sizes
  • Optimized API calls

3. Developer Workflow ​

  • Faster HMR updates
  • Better error messages
  • Enhanced debugging
  • Improved CLI feedback

Security Enhancements ​

1. Authentication ​

  • Enhanced session security
  • Better token management
  • Improved CORS handling
  • XSS protection

2. API Security ​

  • Improved request validation
  • Better error handling
  • Enhanced rate limiting
  • Request sanitization

3. Data Protection ​

  • GDPR compliance improvements
  • Better data encryption
  • Enhanced webhook security
  • Secure cookie handling

Developer Tools ​

1. New CLI Commands ​

  • npm run dev:reset - Improved configuration reset
  • npm run show:env - Better environment management
  • npm run format - Project-wide formatting
  • npm run lint - Enhanced linting

2. Testing Tools ​

  • Improved unit test setup
  • Better webhook testing
  • E2E test templates
  • Test utilities

Breaking Changes ​

1. Authentication ​

  • Removed useAuthenticatedFetch (now built-in)
  • Updated session management
  • New authentication flow
  • Changed token handling

2. Configuration ​

  • New ESLint configuration
  • Updated TypeScript config
  • Changed build settings
  • New environment variables

3. API Changes ​

  • Updated API endpoints
  • New response formats
  • Changed webhook structure
  • Updated database schema

Migration Guide ​

For detailed step-by-step instructions on migrating from v2 to v3, please see our comprehensive migration guide.

Below is a summary of key migration steps:

1. Update Dependencies ​

bash
# Remove old lockfile
rm package-lock.json

# Fresh install
npm install

2. Update Configuration ​

  • Review .env variables
  • Update ESLint config
  • Check TypeScript settings
  • Verify Vite config

3. Code Updates ​

  • Remove useAuthenticatedFetch usage
  • Update API calls
  • Check webhook handlers
  • Review database calls

Future Plans ​

Upcoming Features ​

  • GraphQL codegen integration
  • Improved testing tools
  • Enhanced deployment options
  • More database adapters

Planned Improvements ​

  • Better documentation
  • More example components
  • Additional templates
  • Enhanced tooling

Feedback and Support ​

We're always looking to improve! Please:

  1. Report issues on GitHub
  2. Join discussions
  3. Submit feature requests
  4. Share your experience

Resources ​

Released under the MIT License.

Copyright © 2023-present