自分用です。CDNから取り込んでいるので本番環境では適宜書き換えが必要。
あとOptions API。暇を見てCompositions APIに書き換える予定。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="サイトやページコンテンツの説明">
<meta name="title" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<!-- Vuetify 3 cdn ※ 本番環境ではローカルを指定 -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.6.3/dist/vuetify-labs.min.css" rel="stylesheet">
<!-- mdi font cdn ※ 本番環境ではローカルを指定 -->
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- usr css -->
<link href="src/css/usr.css" rel="stylesheet">
</head>
<body>
<div id="my-app">
<!-- mount start -->
<v-app>
<!-- Vueコンポーネントはv-app内でのみ動く -->
<!-- app bar 系はここに書く-->
<v-app-bar app>
<v-row>
<v-col cols="12">
</v-col>
</v-row>
</v-app-bar>
<!-- メインコンテンツ -->
<v-main>
<!-- メインコンテンツはv-mainの中 幅を制御したい場合は適宜Gridを設定する -->
<v-container>
<v-row>
<v-col cols="12" sm="8" class="mx-auto">
<v-row>
<v-col cols="12">
<v-sheet>
mokemoke
</v-sheet>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
<v-footer>
<v-row>
<v-col cols="12">
<v-sheet class="text-center">
<p class="fs-s">{{ siteCreatedYear }} - {{ currentYear }} © appname All rights reserved.</p>
</v-sheet>
</v-col>
</v-row>
</v-footer>
</v-main>
</v-app>
</div>
<!-- Vue & Vuetify Script -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.6.3/dist/vuetify.min.js"></script>
<!-- ※ 本番環境ではローカルを指定 -->
<!-- script setup -->
<script src="src/script/usr.js"></script>
</body>
</html>
src/script/usr.js
const vuetify = Vuetify.createVuetify({
theme: {
defaultTheme: 'light'
}
});
const myApp = {
data() {
return {
siteTitle: 'site name',
siteCreatedYear: '2023',
currentYear: '',
};
},
created() {
this.setCurrentYear();
},
methods: {
setCurrentYear() {
const date = new Date();
this.currentYear = date.getFullYear();
}
},
};
const app = Vue.createApp(myApp);
app.use(vuetify);
app.mount("#my-app");
src/css/usr.css
@import url('https://fonts.googleapis.com/css2?M+PLUS+2:wght@100..900&family=Montserrat:wght@300;400;700&family=Montserrat+Alternates:wght@400;700;800&display=swap');
:root {
--mycolor-primary: #aebe64;
--mycolor-secondary: #f2eee9;
--mycolor-error: #cc6a66;
--mycolor-surface: #fefefe;
--mycolor-accessible: #584f5a;
--myfont: "Montserrat", "M PLUS 2", sans-serif;
}
/* 全ての要素に共通するリセットスタイル */
* {
margin: 0;
padding: 0;
background-color: transparent;
}
/* 通常bodyに設定するスタイルをここに */
#my-app {
font-family: var(--myfont);
font-size: 14px;
text-align: justify;
line-height: 1.72em;
}
/* my-app要素以下の全ての要素に共通するスタイル */
/* vuetifyが用意している各種ディレクティブのデフォルトの背景色や文字色を上書きする */
#my-app * {
color: var(--mycolor-accessible);
background-color: var(--mycolor-surface);
}
/* Typo class css */
.fs-s {
font-size: 90%;
}