YouCan Shop App Template - Nuxt.js

This template helps you build a Nuxt.js app embedded inside the YouCan seller area. It uses Nuxt.js for the framework, Prisma for database management, and includes built-in authentication.

Dependencies

• youcan-shop/qantra: allows your app to integrate within YouCan Seller Area.
• youcan-shop/youcan-ui: YouCan’s design system and component library that helps you build consistent experiences for YouCan merchants.

Prerequisites

• Node.js and a Package Manager (rec. pnpm) installed ;
• YouCan Partner Account: apply for one here ;
• Development Store to preview and test the app.

Getting Started

Recommended: Use YouCan CLI

Simply generate this template using the YouCan CLI by following the Get Started guide.

Alternatively: Clone this Repository

1. Clone the Repository:

git clone https://github.com/youcan-shop/shop-app-template-nuxt.git 
cd shop-app-template-nuxt

2. Install Dependencies:

pnpm install

3. Start the Development Server:

pnpm dev

4. Run Database Migrations (if your app requires a database):

   Ensure your SQLite database is configured, then run:

pnpm prisma migrate dev

5. Install App in Your Development Store for preview:

pnpm youcan app install

Configuration Files

youcan.app.json

This file describes your application to the YouCan App core and is generated by the YouCan CLI. Initially, it contains the name you choose and gets automatically updated with additional details once connected through the partner account.

Note

You'll need to fill in the appropriate URLs where the app runs.

{
    "name": "roi-simulator",
    "id": "<your-app-id>",
    "app_url": "http://localhost:3000/youcan",
    "redirect_urls": [
        "http://localhost:3000/youcan/oauth/callback"
    ],
    "oauth": {
        "scopes": [
            "*"
        ],
        "client_id": "<your-client-id>"
    }
}

.env

Create a .env file by duplicating .env.example and updating it with your Client ID and Client Secret accordingly.

You can find these credentials within Apps in your Partner Dashboard, where your app will appear with the necessary details.

YOUCAN_API_KEY=<your-client-id> 
YOUCAN_API_SECRET=<your-client-secret>
YOUCAN_API_SCOPES=* 
YOUCAN_API_REDIRECT=http://localhost:3000/youcan/oauth/callback 

Ensure the port your app is using matches the configuration.

App Structure

Your project directory will include several important files and folders:

• layouts: Defines the structure of the app's UI.
• pages: Contains Vue components for different routes.
• prisma: Manages database models and migrations.
• public: Static assets like images and fonts.
• server: Server-side logic, including API routes and middleware.
• youcan: Necessary boilerplate with presets for authentication, session management, and platform integration.
• app.vue: The main Vue component.
• .env // .env.example: Environment configuration files.
• youcan.app.json and youcan.web.json: App-specific settings.