I'm trying to convert a template for use with nuxt.js

This attribute gives me this error

Cannot set properties of undefined (setting 'isRightSidebarExpanded')

@click="$store.global.isRightSidebarExpanded = false"

Here is the JS file : https://lineone.piniastudio.com/js/app.js

I imported it into nuxt.js with this line in nuxt.config.js

script: [
     {src: '/js/app.js', body: false, defer:true}
     ]

Then nuxt.js shows me this error because it seems to ignore the client side javascript file, while it works perfectly without nuxt.js but with only static HTML/JS files in local

You can see here that the site is working normally (Laravel) https://lineone.piniastudio.com/

Some HTML variables (such as "activeTab") are also not defined

Property or method "activeTab" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Propertie

But everything works when I just keep HTML/JS/CSS and make it work without nuxt.js in static mode

CodePudding user response：

It is not recommended to change the store data directly.
Vuex use Mutations to commit changes to the store state.

1. add a Mutation that change the isRightSidebarExpanded property

  mutations: {
    isRightSidebarExpanded(state , payload) {
      // mutate state
      state.isRightSidebarExpanded = payload ;
    }
  }

2. now you can call your Mutation

 @click="$store.global.commit('isRightSidebarExpanded',false)" 

---------------------------------------------------------------------------------
For the undefined issue :
-check if the $store.global property exist
-check if you are using the store (main.js)

app.use(store);

CodePudding user response：

I have a theory it may be because the javascript is being referenced before it has been loaded. I had a similar problem dealing with VR/AR frame javascript that I loaded in the same way. I resolved this by using the callback option as described here in this article (Read to the end!).

https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/

Hope that helps! -Brian