{"id":19312169,"url":"https://github.com/bigcommerce/bc-nuxt-vue-starter","last_synced_at":"2025-10-15T01:29:33.563Z","repository":{"id":40671972,"uuid":"244964540","full_name":"bigcommerce/bc-nuxt-vue-starter","owner":"bigcommerce","description":"A starter site for Vue + Nuxt based storefronts that uses Divante's Storefront UI and BC's GraphQL API","archived":false,"fork":false,"pushed_at":"2023-07-18T21:11:10.000Z","size":3707,"stargazers_count":53,"open_issues_count":36,"forks_count":34,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-22T01:45:13.778Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigcommerce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-04T17:39:12.000Z","updated_at":"2025-01-20T18:42:35.000Z","dependencies_parsed_at":"2024-11-10T00:33:32.348Z","dependency_job_id":"c8d8f76f-49c3-4df1-b6c7-d6e300d4cb6d","html_url":"https://github.com/bigcommerce/bc-nuxt-vue-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bigcommerce/bc-nuxt-vue-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fbc-nuxt-vue-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fbc-nuxt-vue-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fbc-nuxt-vue-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fbc-nuxt-vue-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigcommerce","download_url":"https://codeload.github.com/bigcommerce/bc-nuxt-vue-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fbc-nuxt-vue-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268133239,"owners_count":24201371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T00:33:25.067Z","updated_at":"2025-10-15T01:29:33.466Z","avatar_url":"https://github.com/bigcommerce.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bc-nuxt-vue-starter\n\n\u003e BigCommerce + Nuxt + Storefront UI Starter\n\n## UI Features\n\n\u003e 1. Product [Click here for guide](https://www.youtube.com/watch?v=B1mtNPgKHew)\n\u003e    \u003e - Get products by category\n\u003e    \u003e - Search products in search bar\n\u003e    \u003e - Get product with details by slug\n\u003e    \u003e   - Add to cart\n\u003e    \u003e   - Add to wishlist\n\u003e 2. Cart [Click here for guide](https://www.youtube.com/watch?v=pU0JH98ifmc)\n\u003e    \u003e - Get cart\n\u003e    \u003e - Create cart\n\u003e    \u003e - Add item to cart\n\u003e    \u003e - Delete cart\n\u003e 3. Checkout (\"redirected\", \"embedded\", \"custom\")\n\u003e    \u003e - \"redirected\" - redirect to default checkout [Click here for guide](https://www.youtube.com/watch?v=FZi_7kn7W28)\n\u003e    \u003e - \"embedded\" - embed a checkout module in checkout page [Click here for guide](https://www.youtube.com/watch?v=B9W80JSYrXU)\n\u003e    \u003e - \"custom\" - customize checkout page [Click here for guide](https://www.youtube.com/watch?v=jzAGDeLeYts)\n\u003e    \u003e   - Get checkout\n\u003e    \u003e   - Add shipping address to checkout\n\u003e    \u003e   - Add billing address to checkout\n\u003e    \u003e   - Create an order based on checkout\n\u003e    \u003e   - Confirm and pay the order\n\u003e 4. Profile\n\u003e    \u003e - Personal details (This is customer details) [Click here for guide](https://www.youtube.com/watch?v=0z3Vf5ZAUg0)\n\u003e    \u003e   - Login\n\u003e    \u003e   - Register\n\u003e    \u003e - Shipping details (This is customer shipping address) [Click here for guide](https://www.youtube.com/watch?v=IRgXry6ctZk)\n\u003e    \u003e   - Add new shipping address\n\u003e    \u003e   - Update shipping address\n\u003e    \u003e   - Delete shipping address\n\u003e    \u003e - Order history (This is customer order history)\n\u003e    \u003e - Wishlist (This is wishlist of products) [Click here for guide](https://www.youtube.com/watch?v=J2N6I_SxQiM)\n\u003e    \u003e   - List wishlist items\n\u003e    \u003e   - Remove item in wishlist\n\n## Build Setup\n\n```\n# install dependencies\n$ npm install\n\n# ENV\n- Create .env file from .env.example.\n- Input your Store URL and Storefront API Token\n\n# serve with hot reload at localhost:3000\n$ npm run dev\n\n# build for production and launch server\n$ npm run build\n$ npm run start\n\n# generate static project\n$ npm run generate\n```\n\n## Deploy static project on vercel\n\n```\nBefore running bellow script, you should put the vercel ENV from the local env.\n$ npm run deploy\n```\n\n## Deploy non-static project on heroku\n\n```\nFirstly, please create free heroku account.\n\n1. Please follow up below commands.\n   brew install heroku/brew/heroku\n   heroku login\n   heroku create {Heroku App Name} - i.e: heroku create bc-vue-nuxt-starter\n   npm run set-heroku-env\n2. Please make you are on the latest updates of your current branch codebase.\n3. After checking of these, please change something.\n\n- Change \"target: 'static'\" to \"target: 'server'\" in nuxt.config.js\n- Remove .env from .gitignore.\n\n4. Run commands\n   git add .\n   git commit -am \"commit message\"\n   git push heroku master\n```\n\n## Deploy static project on netlify\n\n```\nImportant thing is to push .env file to git if you are going to publish from github repo. For security person, we recommend you to use your private repo.\n\n1. Set all environments from your local to netlify environment setting\n2. Run these commands on local. `netlify login`, `netlify dev` if you want to run this application on netlify environment, please add local netlify function url to netlify env.\n3. `git push`, then netlify server will automatically build your applicatoin.\n\n```\n\n### For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).\n\n## Requirements\n\nYou will need a channel.\n\n```json\nPOST https://api.bigcommerce.com/stores/{{store_hash}}/v3/channels\n{\n  \"is_listable_from_ui\": false,\n  \"is_visible\": true,\n  \"name\": {channel_name},\n  \"status\": \"active\",\n  \"type\": \"storefront\",\n  \"platform\": \"custom\",\n  \"config_meta\": {\n    \"app\": {\n      \"id\": {app id},\n      \"sections\": [{ \"title\": {title}, \"query_path\": {query path} }]\n    }\n  }\n}\n\nOr you can just run a CLI.\n$ npm run create-storefront-channel --name {channel name} --appId {app id} --sections {sections}\ni.e -\u003e npm run create-storefront-channel --name \"channel name\" --appId 4949 --sections '[{\"title\":\"Overview\", \"query_path\":\"overview\"}]'\nData type should be matched like above\n```\n\nYou'll need a BigCommerce store and a token for our GraphQL Storefront API, which you can create in the API Account section of the control panel. Once you have your BC API credentials, here's a sample request to create a token:\n\n```json\nPOST https://api.bigcommerce.com/stores/{{store_hash}}/v3/storefront/api-token\n{\n  \"channel_id\": 1,\n  \"expires_at\": 2133443661,\n  \"allowed_cors_origins\": [\"http://localhost:3000\"]\n}\n\nOr you can just run a CLI.\n$ npm run create-storefront-token --channelId {channel id} --hostUrl {host url}\nchannel_id - you will get this id from above command.\ni.e -\u003e npm run create-storefront-token --channelId 123455 --hostUrl http://localhost:3000\n\n(*) If you need to deploy on vercel, you should set the origin as the initially deployed URL and create this token.\n```\n\nYou will need a site.\n\n```json\nPOST https://api.bigcommerce.com/stores/{{store_hash}}/v3/channels/{{channelId}}/site\n{\n  \"channel_id\": 123456,\n  \"url\": \"http://store.example.com\"\n}\n\nOr you can just run a CLI.\n$ npm run create-storefront-site --channelId {channel id} --siteUrl {site url}\ni.e -\u003e npm run create-storefront-site --channelId 123456 --siteUrl \"http://store.example.com\"\n```\n\nYou will need a route.\n\n```json\nPOST https://api.bigcommerce.com/stores/{{store_hash}}/v3/sites/{{siteId}}/routes\n{\n  \"type\": \"product\",\n  \"route\": \"/product/book\",\n  \"matching\": \"*\"\n}\n\nOr you can just run a CLI.\n$ npm run create-storefront-route --siteId {site id} --type {type} --route {route}\ni.e -\u003e npm run create-storefront-route --siteId 1001 --type \"product\" --route \"/product/book\"\nIf you don't input these params, default routes will be added.\n[\n  {\n    \"type\": \"cart\",\n    \"matching\": \"*\",\n    \"route\": \"/cart\"\n  },\n  {\n    \"type\": \"product\",\n    \"matching\": \"*\",\n    \"route\": \"/products/{slug}\"\n  },\n  {\n    \"type\": \"category\",\n    \"matching\": \"*\",\n    \"route\": \"/{slug}\"\n  },\n  {\n    \"type\": \"home\",\n    \"matching\": \"*\",\n    \"route\": \"/\"\n  },\n  {\n    \"type\": \"account_order_status\",\n    \"matching\": \"*\",\n    \"route\": \"/login?action=view_order_status\"\n  },\n  {\n    \"type\": \"create_account\",\n    \"matching\": \"*\",\n    \"route\": \"/register\"\n  },\n  {\n    \"type\": \"login\",\n    \"matching\": \"*\",\n    \"route\": \"/login\"\n  }\n]\n```\n\n## How to use sample translation JSON file\n\n```\n{\n  \"es\": [\n    {\n      \"[Sample] 1 L Le Parfait Jar\": \"[Muestra] Tarro Le Parfait de 1 litro\",\n      \"Color\": \"Color\",\n      \"Orange\": \"Naranja\",\n      \"Size\": \"Tamaño\",\n      \"Medium\": \"Medio\",\n      \"Weight\": \"Peso\",\n      \"5Kg\": \"5Kg\",\n      \"Modifier\": \"Modificador\",\n      \"test2\": \"test2\"\n    }\n  ],\n  \"en\": [\n    {\n      \"[Sample] 1 L Le Parfait Jar\": \"[Sample] 1 L Le Parfait Jar\",\n      \"Color\": \"Color\",\n      \"Orange\": \"Orange\",\n      \"Size\": \"Size\",\n      \"Medium\": \"Medium\",\n      \"Weight\": \"Weight\",\n      \"5Kg\": \"5Kg\",\n      \"Modifier\": \"Modifier\",\n      \"test2\": \"test2\"\n    }\n  ]\n}\nIf you want to write sample translation for cart name and cart configuration, you should add translations of carts as arrays.\n```\n\n## How to set up checkout type\n\n```\nThere are 3 types of checkout type - `redirected`, `custom`, `embedded`.\nIf you set CHECKOUT_TYPE in env with these variables, it will be worked.\n\"redirected\" - redirect to default checkout page provided in cart reidrect_urls.\n\"custom\" - go to customized checkout page.\n\"embedded\" - load default checkout page into our storefront checkout page as iframe. This wouldn't work on HTTP localhost. Firstly, you should use SSL for this using ngrok or any other thing. And you should input the https URL into channel site URL.\n```\n\nIf you're new to BigCommerce, that's ok! You can create a free developer sandbox store here: https://developer.bigcommerce.com/sandbox/vue\n\n## Props\n\nDivante's awesome open sourced Storefront UI project made it possible to quickly make this look and feel like a real e-comm site using Vue + Nuxt. Check it out here: http://storefrontui.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fbc-nuxt-vue-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigcommerce%2Fbc-nuxt-vue-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fbc-nuxt-vue-starter/lists"}