78 lines
2.1 KiB
HTML
78 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vue 3 with Vuetify, Vuex, and Multiple Components</title>
|
|
<!-- Vuetify CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" rel="stylesheet">
|
|
<!-- Google Fonts (optional) -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<!-- Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
|
|
<!-- Vuex -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vuex@next"></script>
|
|
<!-- Vuetify -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vuetify@3"></script>
|
|
<!-- Axios -->
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<!-- Store JS -->
|
|
<script src="store/store.js"></script>
|
|
<!-- Component JS -->
|
|
<script src="components/ComponentA.js"></script>
|
|
<script src="components/ComponentB.js"></script>
|
|
|
|
<script>
|
|
// Define Vue components in global scope
|
|
//Vue.createApp({}).component('component-a', ComponentA);
|
|
//Vue.createApp({}).component('component-b', ComponentB);
|
|
|
|
// Vue App
|
|
const app = Vue.createApp({
|
|
components: {
|
|
'component-a': ComponentA,
|
|
'component-b': ComponentB
|
|
},
|
|
setup() {
|
|
const store = Vuex.useStore();
|
|
const count = Vue.computed(() => store.state.count);
|
|
const data = Vue.computed(() => store.state.data);
|
|
|
|
function increment() {
|
|
store.dispatch('increment');
|
|
}
|
|
|
|
function decrement() {
|
|
store.dispatch('decrement');
|
|
}
|
|
|
|
function fetchData() {
|
|
store.dispatch('fetchData');
|
|
}
|
|
|
|
return { count, data, increment, decrement, fetchData };
|
|
},
|
|
template: `
|
|
<v-container>
|
|
|
|
<v-card>
|
|
|
|
<component-a></component-a>
|
|
<component-b></component-b>
|
|
</v-container>
|
|
`
|
|
});
|
|
|
|
const vuetify = Vuetify.createVuetify();
|
|
|
|
app.use(store);
|
|
app.use(vuetify);
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html>
|