Vite + Vue3 + TS + SRR SDK VUE

1

Hi
Does anyone have a clue as to what the VITE + SSR implementation should look like?

When I simply had Vite + Vue3 + TS + SDKaVue3, it worked fine, but when I add SSR, or use the Vite installation kits, and then add the Vue3 SDK, the same errors or crashes.

2

Hi Przemek. What is the error you are getting?

3

We also provide an example implementation of Vue SSR. You can check it out here:

4

I’ll do the setup again soon to see the error. Thank you for the example, but the above example shows that it concerns Nuxta, not vite+vue3

5

@Nikola_Trajkovski
…\vitSsr\node_modules@bloomreach\spa-sdk\dist\index.umd.js:366
if (url.startsWith(“//”)) {
^

TypeError: url.startsWith is not a function
at parseUrl (…\vitSsr\node_modules@bloomreach\spa-sdk\dist\index.umd.js:366:17)

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <br-page :configuration="configuration" :mapping="mapping">
    <template v-slot="props">
      <header>
        <!-- <a :href="props.page.getUrl('/')">Home</a> --> **it make error to**
        <br-component component="menu" />
      </header>
      <section>
        <br-component component="main" />
      </section>
      <footer>
        <br-component component="footer" />
      </footer>
    </template>
  </br-page>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup lang="ts">
import { TYPE_CONTAINER_ITEM_UNDEFINED } from '@bloomreach/spa-sdk'
import axios from 'axios'
import Fallback from './components/Fallback.vue'
import Menu from './components/Menu.vue'
import BannerCTA from './components/BannerCTA.vue'
import TitleAndText from './components/TitleAndText.vue'
import Content from './components/Content.vue'
import SingleBannerCarousel from './components/SingleBannerCarousel.vue'
import MultiBannerCarousel from './components/MultiBannerCarousel.vue'
import Navigation from './components/Navigation.vue'
import SearchBar from './components/SearchBar.vue'

const isBrowser = typeof window !== "undefined";

const configuration = {
   NBRMode: true,
  path: isBrowser && `${window.location.pathname}${window.location.search}`,
  endpoint: 'https://....io/delivery/site/v1/channels/wwl/pages',
  httpClient: axios
}
const mapping = {
  Menu,
  TitleAndText,
  BannerCTA,
  Content,
  SingleBannerCarousel,
  MultiBannerCarousel,
  Navigation,
  SearchBar,
  [TYPE_CONTAINER_ITEM_UNDEFINED]: Fallback
}
</script>
6

And what is the node version you are using? And also what is the bloomreach spa-sdk version you use?

7

node -v
v20.14.0
“dependencies”: {
“@bloomreach/spa-sdk”: “^23.3.0”,
“@bloomreach/vue-sdk”: “^23.3.0”,

8

image

9

The issue occurs because the path property in the configuration object on the server side receives a “false” value instead of an “undefined” or an actual path string.