I have integrated localForage into my SSR Nuxt project.
and within my Nuxt-Page-Component
...
<script>
import localforage from 'localforage';
export default{
mounted(){
localforage.getItem('something', value => {
...
});
}
}
</script>
...
Since localforage only functions in the browser, I encounter an error every time I attempt to access the page in server-side-render mode. (although the page still loads correctly)
ERROR No available storage method found. at node_modules/localforage/dist/localforage.js:2743:25
https://i.sstatic.net/tqmjP.png
I tried using localforage as a custom plugin in my project, configuring it as a client-side-only plugin
// nuxt.config.js
module.exports = {
...
plugins:[
{ src: '~/plugins/localforage', ssr: false }
],
...
}
// localforage.js
import localforage from 'localforage';
window.localforage = localforage;
// localforage.js (or as a Vue plugin)
import localforage from 'localforage';
import Vue from 'vue';
Vue.use({
install(Vue){
Vue.prototype.$localforage = localforage;
}
});
However, this resulted in additional errors and now the page fails to render altogether.
How can I resolve this error? I have searched on Google but found no solutions.
Thank you!
(English is not my first language, apologies for any mistakes)