One reason for this issue is that the window load event has already occurred when transitioning from the landing page to the about page.
To resolve this, you can directly invoke this.curtainsjs() within the mounted hook, which should resolve the issue.
However, this approach may result in memory leaks each time you navigate away from the about page since the curtains instance may not be disposed of correctly. There are a few solutions to prevent this:
Solution 1 - Quick Fix
Assign the curtains instance to a private component variable and dispose of the instance before unmounting the component.
Although this method may work, it is not optimal in terms of performance and resources since a new webgl context will be created each time you visit the about page.
mounted(){
this.curtainjs();
},
beforeUnmount() {
if(this.$curtains) {
// dispose curtains instance
this.$curtains.dispose();
}
},
methods: {
curtainjs() {
// Code for initializing Curtains and handling planes
}
}
Solution 2 - Best Practice
The recommended approach in the context of Vue is to create a curtains plugin and a Curtains component at the root of your App to handle the webgl context creation only once during initialization.
Then, you can create multiple Plane components as needed with their own lifecycle methods using the plugin for creation and removal procedures.
While omitting the full code example here, creating a Vue use case for the library could be beneficial. Additionally, consider enhancing your code by managing errors, events, and variables with Vue's data, computed, and methods, importing shaders from external files, and other improvements.