Socket
Socket
Sign inDemoInstall

@shopware-pwa/nuxt3-module

Package Overview
Dependencies
204
Maintainers
2
Versions
526
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopware-pwa/nuxt3-module

Nuxt 3 module for Shopware Frontends


Version published
Maintainers
2
Weekly downloads
1,907
decreased by-23.14%

Weekly downloads

Readme

Source

shopware/frontends - nuxt3-module

Nuxt module that allows you to set up a Nuxt 3 project with Shopware Frontends. It provides the composables and api-client packages.

If you want to use these packages with a different Vue.js framework, see the guide for using Shopware Frontends in a custom project or use the vue3-plugin.

Features

  • Business logic covered by Composables package. Registering all composable functions globally. See the reference.
  • Shopware context shared in Nuxt application.
  • Configured API Client package.

Setup

Install npm package:

# Using pnpm
pnpm add -D @shopware-pwa/nuxt3-module

# Using yarn
yarn add --dev @shopware-pwa/nuxt3-module

# Using npm
npm i @shopware-pwa/nuxt3-module --save-dev

Then, register the module by editing nuxt.config.js or (.ts) file (by extending modules array):

/* nuxt.config.ts */

export default defineNuxtConfig({
  /* ... */
  modules: [, /* ... */ "@shopware-pwa/nuxt3-module"],

  runtimeConfig: {
    public: {
      shopware: {
        // connect to your Shopware 6 API instance
        shopwareEndpoint: "https://demo-frontends.shopware.store",
        shopwareAccessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
      },
    },
  },
});

Set up your own API instance by adding public runtimeConfiguration in the same file. The nuxt module (and vue plugin) will use this values.

Basic usage

Now you can use any composable function you need without extra import:

<script setup>
  const { login } = useUser();
  const { refreshSessionContext } = useSessionContext();
  refreshSessionContext();
</script>

The information about the session is kept in a cookie (sw-context-token) and used in every request made by any composable or directly, invoked by api instance:

<script>
  const { apiInstance } = useShopwareContext();
  const rawApiResponse = await apiInstance.invokePost(/** params omitted */);
</script>

TypeScript support

All composable functions are fully typed with TypeScript and they are registed globally in Nuxt.js application, so the type hinting will help you to work with all of them.

📦 Advanced packaging

Internally, the module uses API Client and Composables packages, configured together to make everything working well. If you need to check how it's working on a different version of one of them, install a package locally in your project (to be installed and available in project's package.json file), then the Nuxt module will use yours. Keep in mind that the different configuration may lead to unexpected behavior.

Changelog

Full changelog for stable version is available here

Latest changes: 0.3.4

Patch Changes

  • Types for devStorefrontUrl

  • Updated dependencies [0242a3ad]:

    • @shopware-pwa/composables-next@0.8.2

Keywords

FAQs

Last updated on 24 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc