Bootstrap-Vue or Vuetify with VSF?

I’ve tried to integrate several Vue component libraries (Bootstrap-Vue, Vuetify, etc.) with VSF, but when I try to build my VSF project with them, they always fail with a similar error:

Built at: 12/01/2019 ...
 278 assets
Entrypoint app = manifest.b0eae778ebc8781d0149.js vendor.b0eae778ebc8781d0149.js app.b0eae778ebc8781d0149.js

ERROR in ./core/lib/search/adapter/searchAdapterFactory.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (10:36)

   8 | 
   9 | export const getSearchAdapter = async (adapterName = server.api) => {
> 10 |   const SearchAdapterModule = await import(/* webpackChunkName: "vsf-search-adapter-" */ `./${adapterName}/searchAdapter`)
     |                                     ^
  11 |   const SearchAdapter = SearchAdapterModule.SearchAdapter
  12 | 
  13 |   if (!SearchAdapter) {

 @ ./core/lib/search.ts 7:0-73 34:45-61
 @ ./core/modules/cms/store/page/actions.ts
 @ ./core/modules/cms/store/page/index.ts
 @ ./core/modules/cms/index.ts
 @ ./core/modules-entry.ts
 @ ./core/app.ts
 @ ./core/client-entry.ts
 @ multi @babel/polyfill ./core/client-entry.ts

I’ve also already seen this thread, but nobody ever confirmed that Bootstrap-Vue was successfully working with VSF.

Can somebody please provide clear instructions on how to integrate Bootstrap-Vue or Vuetify with VSF?

Thank you in advance.

After doing more troubleshooting, I was able to get a different error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):


That led me to this Vuetify issue. It seems that node-sass is not compatible with Vuetify and probably most other Vue component frameworks today. They recommend replacing node-sass with sass. I did that in my theme’s directory, but it did not fix the problem. I also tried replacing the node-sass in the core directory, but that just created more errors.

I’m losing hope that I will ever get any Vue component framework working with VSF. Please help.

@przspa @FilipRakowski - guys can you please help @Julia?

Hi @Julia did you see StorefrontUI it’s our VUE.JS library and it works with VueStorefront :). You can check what component we heave on our Storybook. To integrated both projects you should use terminal and go to src/themes/default and just use yarn @storefront-ui/vue Getting Started Guide

Hi @przspa , yes, I saw that, but the StorefrontUI GitHub says “not ready for production use” so I didn’t spend much time analyzing the features because we can’t afford to implement anything that’s unstable. (The state of the core VSF components is already fluctuating a lot, which is not easy to deal with when we have so many other project-specific tasks to focus on.) We need a UI library like Bootstrap or Vuetify that is ready for production use.

Also, it looks like the StorefrontUI is focused on ecommerce widgets, not general widgets like basic content tabs, menus, popup windows, tables with pagination, and the basic content components that Bootstrap/Vuetify provide.

I hope somebody can explain how to integrate Bootstrap or Vuetify soon so we can add the content that we need to add to the pages of our VSF-based store.

That’s an interesting topic to be covered by cookbook. Thanks for the feedback @Julia