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.
- 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.
- Node.js and a Package Manager (rec. pnpm) installed ;
- YouCan Partner Account: apply for one here ;
- Development Store to preview and test the app.
Recommended: Use YouCan CLI
Simply generate this template using the YouCan CLI by following the Get Started guide.
- Clone the Repository:
git clone https://github.com/youcan-shop/shop-app-template-nuxt.git
cd shop-app-template-nuxt
- Install Dependencies:
pnpm install
- Start the Development Server:
pnpm dev
-
Run Database Migrations (if your app requires a database):
Ensure your SQLite database is configured, then run:
pnpm prisma migrate dev
- Install App in Your Development Store for preview:
pnpm youcan app install
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>"
}
}
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.
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.