VueTube/NUXT/pages/activities/install.vue

<template>
<div>
    <center class="container" ref="stage0">
        <v-img
            src="/icon.svg"
            width="10rem"
            height="10rem"
            :class="$vuetify.theme.dark ? '' : 'invert'"
        />
        <h1>{{ lang.welcome }}</h1>
        <p>{{ lang.tagline }}</p>
    </center>

    <center class="container hidden" ref="stage1">
        <h1>{{ lang.langsetup }}</h1>
        <language style="width: 80%;" />
    </center>

    <center class="container hidden" ref="stage2">
        <h1>{{ lang.featuresetup }}</h1>
        <v-checkbox disabled v-model="ryd" :label="lang.enableryd" />
        <v-checkbox disabled v-model="sponsorBlock" :label="lang.enablespb" />
    </center>

    <center class="container hidden" ref="stage3">
        <h1>{{ lang.thanks }}</h1>
        <h3>{{ lang.enjoy }}</h3>
    </center>

    <v-btn @click="next()" class="rounded-xl primary nextButton">{{ lang.next }} <v-icon style="margin-left: 0.5em;">mdi-arrow-right</v-icon></v-btn>
</div>
</template>

<style scoped>
.nextButton {
    position: absolute;
    bottom: 1em;
    right: 2em;
}

.hidden {
    display: none;
}

.fullWidth {
    width: 100%;
}

.container {
    width: 100%;
}
</style>

<script>
import language from '~/components/Settings/language.vue';
  export default {
    layout: "empty",
    components: {
      language
    },
    data() {
        return {
            lang: {},
            stage: 0,

            ryd: true,
            sponsorBlock: true,
        }
    },
    mounted() {
        this.lang = this.$lang("events");
    },
    methods: {
        next() {
            this.$refs["stage"+this.stage].style.display = "none";
            this.stage++;

            if (!this.$refs["stage"+this.stage]) {
                localStorage.setItem("lastRunVersion", process.env.appVersion);
                localStorage.setItem("firstTimeSetupComplete", true);
                this.$router.replace('/');
            }

            this.$refs["stage"+this.stage].style.display = "block";
        }
    }
}
</script>