nuxt-state-extractor v1.1.1

Nuxt state extractor

Nuxt.js module that makes nuxt generate command to store vuex state as json file.

Ispired by DreaMinder/nuxt-payload-extractor.

Benefits

✓ You can access to data from nuxtServerInit\ ✓ Works with nuxt-i18n\ ✓ Uses built-in nuxt staticAssetsBase folder (timestamps, cache invalidation)

Setup

1. Add nuxt-state-extractor dependency

yarn add nuxt-state-extractor
# or
npm installl nuxt-state-extractor

2. Define nuxt module in nuxt.config.js:

{
  modules: ['nuxt-state-extractor'];
}

Usage

Main purpose is integration with nuxt-i18n

Axios & nuxt-i18n

// ./store/index.js
export const actions = {
  async nuxtServerInit({ dispatch }, context) {
    // getting some root data, e.g. header & footer
    await dispatch('getRootData', context);
  },
  getRootData({ dispatch }, context) {
    const {
      app, $stateURL, $axios, route, isDev,
    } = context;
    const { locale } = app.i18n;
    // if generated and works as client navigation, fetch previously saved static JSON payload, otherwise use your fetch logic
    const data = await !isDev && process.static && process.client
      ? $axios.$get($stateURL(route))
      : $axios.$get(`/my-api/root-data/${locale}`);
    };
    commit('setRootData', data);
  }
}

// ./plugins/i18n.js
export default function (context) {
  const { store, app } = context;
  // https://nuxt-community.github.io/nuxt-i18n/callbacks.html#usage
  app.i18n.onLanguageSwitched = async (oldLocale, newLocale) => {
    await store.dispatch('getRootData', context);
  }
};

Apollo & nuxt-i18n

Usage with @nuxtjs/apollo module

// ./store/index.js

import RootDataQuery from '@/apollo/queries/RootDataQuery.gql';

export const actions = {
  async nuxtServerInit({ dispatch }, context) {
    // getting some root data, e.g. header & footer
    await dispatch('getRootData', context);
  },
  getRootData({ dispatch }, context = this) {
    const {
      app, $stateURL, $axios, route,
    } = context;
    const apollo = app.apolloProvider.defaultClient;
    const { locale } = app.i18n;
    let data;
    // if generated and works as client navigation, fetch previously saved static JSON payload, otherwise use apollo query
    if (!isDev && process.static && process.client) {
      const response = await fetch($stateURL(route));
      data = response.json();
    } else {
      const response = await apollo.query({
        query: RootDataQuery,
        variables: {
          locale,
        },
      });
      data = response.data;
    }
    commit('setRootData', data);
  }
}

// ./plugins/i18n.js
export default function (context) {
  const { store, app } = context;
  // https://nuxt-community.github.io/nuxt-i18n/callbacks.html#usage
  app.i18n.onLanguageSwitched = async (oldLocale, newLocale) => {
    await store.dispatch('getRootData', context);
  }
};

Options

You can blacklist specific paths using blacklist: [] options. They will be generated in native way.

How it works

• Extracts page data during 'render:routeContext' hook
• Writes extracted data in 'generate:done' hook
• \$stateURL helper composes url: ${document.location.origin}${routerBase}${staticAssetsBase}${routePath}/${fileName}