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.