shopinvader-template-nuxtjs is a Nuxt 3 VueJS open-source template for ShopInvader the e-commerce solution for Odoo.
See shopinvader.com Look at the nuxt 3 documentation to learn more.
This template provides a solid and flexible foundation for building a new ShopInvader webshop. You can extend and adapt this theme to meet your webshop requirements.
Clone this repository
$ git clone https://github.com/shopinvader/shopinvader-template-nuxtjs.git YOUR_SITE_NAME
Make sure to install the dependencies:
# yarn
yarn install
Node version >= 18 is required. You can use NVM to manage your node versions.
nvm use
or
nvm install 18
nvm use 18
Start the development server on http://localhost:3000
yarn dev
Build the application for production:
yarn build
Locally preview production build:
yarn preview
Checkout the deployment documentation for more information.
You can add basic auth to your app by adding the following environment variables:
NUXT_BASIC_AUTH="user1:pass1;user2:pass2"
You can access to the Shopinvader API (Odoo) or Product and category data (Elasticsearch) via a list of TS services. A service is a class that provides a set of methods to interact with the API.
These services are included in the template (./service directory) you can access to all the services via a composable function.
via the plugin:
const cartService = useShopinvaderService('cart')
const cart = await cartService.getCart()
const productService = useShopinvaderService('products')
const products = await productService.getAll()
You can extend the service list by adding a new service in the ./service directory. To load the service you need to add it in the global interface ShopinvaderServiceList and add in the Nuxt context plugin. After loading the service you can access to it via the composable function useShopinvaderService.
/** ./services/MyCustomService.ts */
// New service class
export class MyCustomService {
i: Ref<number>
constructor() {
this.i = useState('i', () => 0)
}
up() {
this.i.value++
}
public get() {
return this.i
}
}
/** ./plugins/CustomServices.ts */
// Add the service in the global interface
declare global {
interface ShopinvaderServiceList {
['myCustomService']: MyCustomService
}
}
// Add the service in the Nuxt context plugin
export default defineNuxtPlugin((nuxtApp) => {
const services = nuxtApp.$shopinvader.services as ShopinvaderServiceList
services.myCustomService = new MyCustomService()
})
/** ./pages/index.ts */
// Use the service in a page
<script setup lang="ts">
const service = useShopinvaderService('myCustomService')
const i = service.get()
const up = () => service.up()
</script>
This project is open source under the terms of the MIT License