VueTube/NUXT/pages/settings.vue

<template>
  <div style="padding-top: 1em">
    <v-list-item v-for="(item, index) in settingsItems" :key="index">
      <v-btn
        text
        class="entry text-left text-capitalize"
        :to="item.to"
        :disabled="item.disabled"
      >
        <v-icon size="30px" class="icon" v-text="item.icon" />
        {{ item.name }}
      </v-btn>
    </v-list-item>

    <!--   Dev Mode Open   -->
    <v-btn text class="entry" @click="dev()" v-if="!devmode" />

    <v-btn
      text
      class="entry text-left text-capitalize"
      style="margin: 0 0.75em 0 0.75em"
      to="/mods/developer"
      v-if="devmode"
    >
      <v-icon size="30px" class="icon">mdi-database-edit</v-icon>
      {{ devmodebuttonname }}
    </v-btn>
    <!--   End Dev Mode   -->
  </div>
</template>

<style scoped>
.entry {
  width: 100%;
  font-size: 1.2em;
  justify-content: left !important;
  padding: 1.5em 0.5em 1.5em 0.5em !important;
}

.icon {
  margin-right: 0.5em;
}
</style>

<script>
export default {
  data() {
    return {
      devClicks: 0,
      devmode: false,

      devmodebuttonname: "Developer Mode",

      settingsItems: [
        {
          name: "General",
          icon: "mdi-cog",
          to: "",
          disabled: true,
        },
        {
          name: "Theme",
          icon: "mdi-brush-variant",
          to: "/mods/theme",
        },
        {
          name: "Player",
          icon: "mdi-motion-play-outline",
          to: "",
          disabled: true,
        },
        {
          name: "UI Tweaker",
          icon: "mdi-television-guide",
          to: "/mods/tweaks",
        },
        {
          name: "Startup Options",
          icon: "mdi-restart",
          to: "/mods/startup",
        },
        {
          name: "Plugins",
          icon: "mdi-puzzle",
          to: "",
          to: "/mods/plugins",
          disabled: true,
        },
        {
          name: "Updates",
          icon: "mdi-cloud-download-outline",
          to: "/mods/updates",
        },
        {
          name: "Logs",
          icon: "mdi-text-box-outline",
          to: "/mods/logs",
        },
        {
          name: "About",
          icon: "mdi-information-outline",
          to: "/mods/about",
        },
      ],
    };
  },

  mounted() {
    this.settingsItems[0].name = this.$lang("settings").general;
    this.settingsItems[1].name = this.$lang("settings").theme;
    this.settingsItems[2].name = this.$lang("settings").player;
    this.settingsItems[3].name = this.$lang("settings").uitweaker;
    this.settingsItems[4].name = this.$lang("settings").startupoptions;
    this.settingsItems[5].name = this.$lang("settings").plugins;
    this.settingsItems[6].name = this.$lang("settings").updates;
    this.settingsItems[7].name = this.$lang("settings").logs;
    this.settingsItems[8].name = this.$lang("settings").about;
    this.devmodebuttonname = this.$lang("settings").devmode;

    this.devmode = localStorage.getItem("devmode");
  },

  methods: {
    dev() {
      this.devClicks++;
      if (this.devClicks >= 6) {
        localStorage.setItem("devmode", "true");
        this.devmode = true;
      }
    },
  },
};
</script>

<style scoped>
.entry {
  width: 100%;
  font-size: 1.2em;
  justify-content: left !important;
  padding: 1.5em 0.5em 1.5em 0.5em !important;
}
.icon {
  margin-right: 0.5em;
}
</style>