Vuetify Profile Page

profile.vue

<template>
    <v-container fluid>
        <v-layout column>
            <v-card>
                <v-card-text>
                    <v-flex class="mb-4">
                        <v-avatar size="96" class="mr-4">
                            <img :src="'/avatars/avatar_' + (form.avatar.toLowerCase()) + '.png'" alt="Avatar">
                        </v-avatar>
                        <v-btn @click="openAvatarPicker">Change Avatar</v-btn>
                    </v-flex>
                    <v-text-field
                        v-model="form.firstName"
                        label="FirstName"></v-text-field>
                    <v-text-field
                        v-model="form.lastName"
                        label="Last Name"></v-text-field>
                    <v-text-field
                        v-model="form.contactEmail"
                        label="Email Address"></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" :loading="loading" @click.native="update">
                        <v-icon left dark>check</v-icon>
                        Save Changes
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-layout>
        <avatar-picker
            v-model="showAvatarPicker"
            :current-avatar="form.avatar"
            @selected="selectAvatar"></avatar-picker>
    </v-container>
</template>

<script>
    import AvatarPicker from '~/components/AvatarPicker'

    export default {
        pageTitle: 'My Profile',

        components: { AvatarPicker },

        data () {
            return {
                loading: false,
                form: {
                    firstName: 'John',
                    lastName: 'Doe',
                    contactEmail: '[email protected]',
                    avatar: 'MALE_CAUCASIAN_BLOND_BEARD'
                },
                showAvatarPicker: false
            }
        },

        methods: {
            openAvatarPicker () {
                this.showAvatarPicker = true
            },

            selectAvatar (avatar) {
                this.form.avatar = avatar
            }
        }
    }
</script>

Do you have a codesandbox or something so that I can look into the code?

Basically the answer to the SO question is correct.

In your entry page (where you use your first <router-view /> you need to make

<template>
    <div>
        <template v-if="authenticated">
          <app-header />
          <main-sidebar />
           <router-view />
          <app-footer />
       </template>
        <template v-else>
          <!-- When the user is not logged in -->
          <router-view></router-view>
        </template>
    </div>
</template>

<script>

  import AppHeader from './components/sections/AppHeader'
  import AppFooter from './components/sections/AppFooter'
  import MainSidebar from './components/sections/MainSidebar'

export default {
  name: 'app',
  components: {
    AppHeader,
    AppFooter,
    MainSidebar
  },
  computed: {
    authenticated () {
     return true; // Depends on how you authenticate users, cookies, localStorage, etc..
  }
}
</script>

This way you can show a different template if you're logged in or not.

In addition to this, in your router you should define which routes require authentication or not.
Here's an article that explains that: https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router

Thanks!

It works thanks