add persisted state

layouts/default.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex flex-col items-stretch w-full min-h-screen tracking-wide border-l-3 border-r-3"
+    class="flex flex-col items-stretch w-full min-h-screen tracking-wide  border-l-3 border-r-3"
   >
     <!-- Mobile Logo -->
     <NuxtLink
       :to="localePath('/')"
-      class="sticky top-0 z-40 block p-8 overflow-hidden border-b-3 sm:hidden border-t-3 bg-secondary-100"
+      class="sticky top-0 z-40 block p-8 overflow-hidden  border-b-3 sm:hidden border-t-3 bg-secondary-100"
     >
       <div class="flex mb-4 logo-wrapper-mobile animate-logoScrollMobile1">
         <div class="flex-shrink-0 w-1/2 pr-12">
@@ -32,7 +32,7 @@
     <!-- Desktop Logo -->
     <NuxtLink
       :to="localePath('/')"
-      class="fixed top-0 left-0 z-40 justify-center flex-shrink-0 hidden h-full overflow-hidden w-14 sm:block border-r-3 lg:w-18"
+      class="fixed top-0 left-0 z-40 justify-center flex-shrink-0 hidden h-full overflow-hidden  w-14 sm:block border-r-3 lg:w-18"
     >
       <DesktopLogo
         class="
@@ -67,12 +67,15 @@ import Footer from '@/components/Footer.vue'
 export default {
   components: { HannesLogo, SchuetzLogo, DesktopLogo, Footer },
   head() {
+    const bodyClasses = ['font-sans']
+    this.$store.state.theme.themeName === 'DARK' && bodyClasses.push('dark')
     return {
       bodyAttrs: {
-        class: ['dark', 'font-sans'],
+        class: bodyClasses,
       },
     }
   },
+  beforeMount() {},
 }
 </script>
 

nuxt.config.js

@@ -2,6 +2,8 @@ export default {
   // Target: https://go.nuxtjs.dev/config-target
   target: 'static',
 
+  ssr: false,
+
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
     title: 'Hannes Schütz',
@@ -18,7 +20,7 @@ export default {
   css: ['@/assets/css/base.css', '@/assets/css/transitions.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: ['@/plugins/router'],
+  plugins: ['@/plugins/router', '@/plugins/persistedState.js'],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,

package.json

@@ -21,7 +21,8 @@
     "@nuxtjs/pwa": "^3.3.5",
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7",
-    "vue-feather-icons": "^5.1.0"
+    "vue-feather-icons": "^5.1.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.7",

plugins/persistedState.js

@@ -0,0 +1,7 @@
+import createPersistedState from 'vuex-persistedstate'
+
+export default ({ store }) => {
+  createPersistedState({
+    key: 'store',
+  })(store)
+}

store/theme.js

@@ -1,12 +1,8 @@
 export const state = () => ({
-  counter: 0,
   themeName: 'DARK',
 })
 
 export const mutations = {
-  increment(state) {
-    state.counter++
-  },
   toggleTheme(state) {
     if (state.themeName === 'DARK') {
       state.themeName = 'LIGHT'

yarn.lock

@@ -10280,6 +10280,11 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shvl@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -11669,6 +11674,14 @@ vue@^2.6.12:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
+vuex-persistedstate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz#127165f85f5b4534fb3170a5d3a8be9811bd2a53"
+  integrity sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.3"
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"