@vue-storefront/nuxt-theme

This module is basically our default theme on steroids. It contains additional utilities that make it easier to work with the theme (in projects and as core developers) and allows to disable parts of its features: - By default, it adds eCommerce [routes](

Usage no npm install needed!

<script type="module">
  import vueStorefrontNuxtTheme from 'https://cdn.skypack.dev/@vue-storefront/nuxt-theme';
</script>

README

Nuxt Theme Module

This module is basically our default theme on steroids. It contains additional utilities that make it easier to work with the theme (in projects and as core developers) and allows to disable parts of its features:

  • By default, it adds eCommerce routes to your app.
  • If you set generate in the config, it will copy, merge & watch for changes in agnostic and integration theme.

How to install

Add dependency:

yarn add @vue-storefront/nuxt-theme

Add it to buildModules in your nuxt.config.js:

['@vue-storefront/nuxt-theme'],

Configuration details

routes

If you want to disable autoadding routes you can do it:

['@vue-storefront/nuxt-theme', {
    routes: false
}],

generate

To properly configure generate property you have to provide data that will be replaced in EJS templates. This property applies only to the core development:

['@vue-storefront/nuxt-theme', {
    generate: {
        replace: {
            apiClient: '@vue-storefront/commercetools-api',
            composables: '@vue-storefront/commercetools'
        }
    }
}],

Example EJS template where it will be pasted:

import { useCategory } from '<%= options.generate.replace.composables %>';

If you want to change the target directory where agnostic and integration themes will be merged and copied during core development change the generate.path property (default: _theme):

['@vue-storefront/nuxt-theme', {
    generate: {
        path: '.custom-dir'
    }
}],