More than 1 year has passed since last update.

HTML1つだけでVue3とVuetify3が試せるテンプレート(2023年2月23日動作)

Last updated at 2023-02-23Posted at 2023-02-23

すぐつかえます

サクッと試したいのに、ソフトウェアの進歩が速くて、検索してもエラーだったり動かなかったり。

次の記事がシンプルで良かったのですが、Vue2+Vuetify2 なので、Vue3 + Vuetify3 に書き換えました。著者様に感謝。

テンプレート(HTML)

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/vuetify@3.1.5/dist/vuetify.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="app">
      <!-- ここから -->

      <v-app>
        <v-system-bar app> Single HTML Template </v-system-bar>

        <v-navigation-drawer app>
          <v-sheet> Hello! </v-sheet>

          <v-divider></v-divider>

          <v-sheet> Left Bar </v-sheet>
        </v-navigation-drawer>

        <v-main>
          <v-toolbar></v-toolbar>

          <v-container fluid>
            <h1 class="display-3">GYU-DON</h1>

            <div class="display-1">message:{{message}}</div>
            <div class="display-1">chip1:{{chip1}}</div>

            <v-chip
              closable
              v-if="chip1"
              @click:close="onClose"
              @click="onChipClick"
            >
              <v-avatar>
                <img
                  src="https://randomuser.me/api/portraits/men/35.jpg"
                  alt="trevor"
                />
              </v-avatar>
              GYUDON MAN
            </v-chip>
          </v-container>
        </v-main>

        <v-footer app>hoge</v-footer>
      </v-app>

      <!-- ここまで！ -->
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.5/dist/vuetify.min.js"></script>
    <script>
      const { createApp, ref } = Vue;

      const App = {
        setup(props, context) {
          const message = ref("this is a pen.");
          const chip1 = ref(true);

          const onChipClick = () => {
            message.value = "Magica Norica!";
          };

          const onClose = () => {
            chip1.value = false;
            message.value = "good night!";
          };

          return { message, chip1, onChipClick, onClose };
        },
      };

      const app = createApp(App);
      app.use(Vuetify.createVuetify());
      app.mount("#app");
    </script>
  </body>
</html>

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up