Skip to main content

Upgrade to 16.0.0

Why you should upgrade​

This upgrade includes support for markets in paths.

See release notes for more information

Steps​

Update nuxt.config.js​

  • Add the marketInPath and useStartPage settings to publicRuntimeConfig in nuxt.config.js:
nuxt.config.js
publicRuntimeConfig {
  ...
    marketInPath: true,
    useStartPage: false
  ...
}
  • Add the get-path plugin to plugins in nuxt.config.js:
nuxt.config.js
plugins: [
  ...
    {
      src: '~/node_modules/@ralph/ralph-ui/plugins/get-path.js'
    },
    ...
  ],

Implement $getPath​

  • Replace all localePath with global $getPath throughout your project:

    examples:​

replace:

/components/organisms/CaHeader/CaHeader.vue
  <NuxtLink class="ca-header__logo-link" :to="localePath('index')">

with:

/components/organisms/CaHeader/CaHeader.vue
   <NuxtLink class="ca-header__logo-link" :to="$getPath('index')">

replace:

/components/organisms/CaAccountPage/CaAccountPage.vue
computed: {
  ...
  currentPageTitle() {
    const currentPage = this.accountMenu.find(
      i => this.localePath(i.path) === this.$route.path
    );
  }
...

with:

/components/organisms/CaAccountPage/CaAccountPage.vue
computed: {
...
  currentPageTitle() {
    const currentPage = this.accountMenu.find(
      i => this.$getPath(i.path) === this.$route.path
    );
  }
...

Install @nuxtjs/router​

  • @nuxtjs/router module is being used with the router.js plugin to modify all routes, if you haven't already done so, install the @nuxtjs/router:
npm i @nuxtjs/router --save-dev
  • Then add the module to buildModules in nuxt.config.js:
nuxt.config.js
...
/*
    ** Nuxt.js dev-modules
    */
    buildModules: [
      // Doc: https://www.npmjs.com/package/@nuxtjs/router
      [
        '@nuxtjs/router',
        {
          path: 'node_modules/@ralph/ralph-ui/plugins',
          keepDefaultRouter: true
        }
      ],
      ...
    ],

Create a new page "start"​

  • First lets's create a new folder start with an index.js file, inside the pages folder. The index.js file should be the same as previous /pages/index.js.
/pages/start/index.vue
<template>
  <div class="ca-front-page">
    <CaWidgetArea
      family="Frontpage"
      area-name="The front page area"
      @dataFetched="$store.dispatch('loading/end')"
    />
  </div>
</template>

<script>
export default {
  name: 'FrontPage',
  data: () => ({}),
  methods: {},
  meta: {
    pageType: 'Front Page'
  }
};
</script>

<style lang="scss"></style>
  • Now create a new index.vue file in the pages folder like this:
/pages/index.vue
<template>
  <div class="ca-start-page">
    <!-- This page is used for redirection to front page with default or no market, or to create a market picker -->
  </div>
</template>

<script>
export default {
  name: 'StartPage',
  data: () => ({}),
  methods: {},
  meta: {
    pageType: 'Start Page'
  }
};
</script>

<style lang="scss"></style>