I'm attempting to use Vue.js for a project like making a theme for Mybb or Xenforo but I'm not sure how I'm going to get the scripts to work without it breaking or using inefficient methods to insert the code.

I also have issue with the text in the dialog flashing before Vue renders it but still flashes when I add v-cloak to app div (Optional because this is not important right now)

I'm using https://vuetifyjs.com/en/ since I can work CDN in my host but can't with packages.

I couldn't find any other resources that would help me or hint the slightest solution to my problem since I couldn't find someone who encountered this.

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
    <div id="app" v-cloak>
        <v-app>
            <v-layout row justify-center>
                <v-btn color="primary" dark @click.stop="dialog = true">
                    Open Dialog
                </v-btn>

                <v-dialog v-model="dialog" max-width="290">
                    <v-card>
                        <v-card-title class="headline">Use Google's location service?</v-card-title>

                        <v-card-text>
                            Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Disagree
                            </v-btn>

                            <v-btn color="green darken-1" flat="flat" @click="dialog = false">
                                Agree
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-layout>

            <v-card height="200px" flat>
                <div class="headline text-xs-center pa-5">
                    Active: {{ bottomNav }}
                </div>
                <v-bottom-nav :active.sync="bottomNav" :value="true" absolute color="transparent">
                    <v-btn color="teal" flat value="recent">
                        <span>Recent</span>
                        <v-icon>history</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="favorites">
                        <span>Favorites</span>
                        <v-icon>favorite</v-icon>
                    </v-btn>

                    <v-btn color="teal" flat value="nearby">
                        <span>Nearby</span>
                        <v-icon>place</v-icon>
                    </v-btn>
                </v-bottom-nav>
            </v-card>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bottomNav: 'recent'
                }
            }
        })
    </script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    dialog: false
                }
            }
        })
    </script>
</body>

</html>

I expected the dialog to show up and the tabs to work so I can put this in somewhere like Mybb and I can still get it to work.

0 Answers