Vue

This guide will walk you through integrating OneSDK with a Vue.js application, covering both Webpack and Vite setups.

Quick Start

1

Create a New Vue Project

Choose your preferred bundler:

# Install Vue CLI globally npm install -g @vue/cli # Create new
$project vue create my-onesdk-app
2

Install OneSDK

$npm install @frankieone/one-sdk
3

Configure Environment Variables

Create a .env file in your project root:

VUE_APP_CUSTOMER_ID=your_customer_id
VUE_APP_CUSTOMER_CHILD_ID=your_child_id
VUE_APP_API_KEY=your_api_key

Never commit sensitive credentials to version control. Add .env to your .gitignore file.

Implementation

Event Handling

Running the Application

1

Start Development Server

$npm run serve
2

Access the Application

Open your browser and navigate to:

  • Webpack: http://localhost:8080
  • Vite: http://localhost:5173
Development Best Practices
  • Keep sensitive configuration in .env files
  • Implement proper error handling for API calls
  • Use Vue’s Composition API for better code organization
  • Consider implementing loading states for better UX

Troubleshooting

Built with