vuetify cdn

Comment

0

Tip Bored Bug 1 GREPCC

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- MDI -->
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet" />
        <!-- VUETIFY CSS -->
        <link href="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css" rel="stylesheet" />

        <style>
            @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

            * {
                font-family: "Roboto", serif;
                font-weight: 500;
                font-style: normal;
            }
        </style>

        <title>Diamond</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- VUE 3 -->
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <!-- VUETIFY -->
        <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js"></script>

        <script type="text/x-template" id="app-template">
            <v-app>
                <v-container>
                    <v-card class="mx-auto py-8" width="850">
                        <h1 class="text-center mb-4">Vue 3 and Vuetify CDN Example Template</h1>
                        <p class="text-h2 text-center mb-4">{{ count }}</p>

                        <v-row no-gutters justify="space-around">
                            <v-col cols="auto">
                                <v-btn
                                   color="error"
                                    width="80"
                                    icon="mdi-minus-thick"
                                    rounded="lg"
                                    variant="tonal"
                                    @click="decrement()"
                                />
                            </v-col>
                            <v-col cols="auto">
                                <v-btn
                                   color="primary"
                                    width="100"
                                    icon="mdi-numeric-0"
                                    rounded="lg"
                                    variant="tonal"
                                    :ripple="false"
                                    @click="this.count = 0"
                                />
                            </v-col>
                            <v-col cols="auto">
                                <v-btn
                                   color="success"
                                    width="80"
                                    icon="mdi-plus-thick"
                                    rounded="lg"
                                    variant="flat"
                                    @click="increment()"
                                />
                            </v-col>
                        </v-row>
                    </v-card>
                </v-container>
            </v-app>
        </script>

        <script>
            const { createApp } = Vue;
            const { createVuetify } = Vuetify;

            const vuetify = createVuetify();

            const app = createApp({
                template: "#app-template",

                // Options API
                data() {
                    return {
                        count: 0,
                    };
                },

                methods: {
                    increment() {
                        this.count++;
                    },
                    decrement() {
                        this.count--;
                    },
                },
            })
                .use(vuetify)
                .mount("#app");
        </script>
    </body>
</html>

xxxxxxxxxx

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- MDI -->

        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet" />

        <!-- VUETIFY CSS -->

        <link href="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.css" rel="stylesheet" />

        <style>

            @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {

                font-family: "Roboto", serif;

                font-weight: 500;

                font-style: normal;

        </style>

        <title>Diamond</title>

    </head>

    <body>

        <div id="app"></div>

        <!-- VUE 3 -->

        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

        <!-- VUETIFY -->

        <script src="https://cdn.jsdelivr.net/npm/vuetify@3.7.6/dist/vuetify.min.js"></script>

        <script type="text/x-template" id="app-template">

            <v-app>

                <v-container>

                    <v-card class="mx-auto py-8" width="850">

                        <h1 class="text-center mb-4">Vue 3 and Vuetify CDN Example Template</h1>

                        <p class="text-h2 text-center mb-4">{{ count }}</p>

                        <v-row no-gutters justify="space-around">

                            <v-col cols="auto">

                                <v-btn

                                   color="error"

                                    width="80"

                                    icon="mdi-minus-thick"

                                    rounded="lg"

                                    variant="tonal"

                                    @click="decrement()"

/>

                            </v-col>

                            <v-col cols="auto">

                                <v-btn

                                   color="primary"

                                    width="100"

                                    icon="mdi-numeric-0"

                                    rounded="lg"

                                    variant="tonal"

                                    :ripple="false"

                                    @click="this.count = 0"

/>

                            </v-col>

                            <v-col cols="auto">

                                <v-btn

                                   color="success"

                                    width="80"

                                    icon="mdi-plus-thick"

                                    rounded="lg"

                                    variant="flat"

                                    @click="increment()"

/>

                            </v-col>

                        </v-row>

                    </v-card>

                </v-container>

            </v-app>

        </script>

        <script>

            const { createApp } = Vue;

            const { createVuetify } = Vuetify;

            const vuetify = createVuetify();

            const app = createApp({

                template: "#app-template",

                // Options API

                data() {

                    return {

                        count: 0,

};

},

                methods: {

                    increment() {

                        this.count++;

},

                    decrement() {

                        this.count--;

},

},

})

                .use(vuetify)

                .mount("#app");

        </script>

    </body>

</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: github.com

Tags: cdn html

Share

Link to this answer
Share Copy Link

Contributed on Mar 22 2025

Bored Bug

0 Answers Avg Quality 2/10

vuetify cdn

Comment

0

Tip S. 1 GREPCC

<!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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<!-- 

production: 

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>

-->
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

xxxxxxxxxx

<!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@6.x/css/materialdesignicons.min.css" rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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-app>

      <v-main>

        <v-container>Hello world</v-container>

      </v-main>

    </v-app>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<!--

production:

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>

-->

  <script>

    new Vue({

      el: '#app',

      vuetify: new Vuetify(),

})

  </script>

</body>

</html>

Popularity 8/10 Helpfulness 7/10 Language css

Source: vuetifyjs.com

Tags: cdn css

Share

Link to this answer
Share Copy Link

Contributed on Sep 10 2022

S.

0 Answers Avg Quality 2/10

Encountered files that should have been pointers, but weren't

Comment

0

Tip Vast Vulture 1 GREPCC

git lfs uninstall
git reset --hard
git lfs install
git lfs pull

OR 

git rm --cached -r .
git reset --hard
git rm .gitattributes
git reset .
git checkout .

https://stackoverflow.com/questions/46704572/error-with-previously-committed-files-which-matches-new-git-lfs-filter

xxxxxxxxxx

git lfs uninstall

git reset --hard

git lfs install

git lfs pull

OR

git rm --cached -r .

git reset --hard

git rm .gitattributes

git reset .

git checkout .

https://stackoverflow.com/questions/46704572/error-with-previously-committed-files-which-matches-new-git-lfs-filter

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Share

Link to this answer
Share Copy Link

Contributed on Mar 18 2025

Vast Vulture

0 Answers Avg Quality 2/10

Encountered files that should have been pointers, but weren't

Comment

0

Tip Vast Vulture 1 GREPCC

Encountered files that should have been pointers, but weren't

git lfs uninstall
git reset --hard
git lfs install
git lfs pull

OR

git rm --cached -r .
git reset --hard
git rm .gitattributes
git reset .
git checkout .

https://stackoverflow.com/questions/46704572/error-with-previously-committed-files-which-matches-new-git-lfs-filter

xxxxxxxxxx

git lfs uninstall

git reset --hard

git lfs install

git lfs pull

OR

git rm --cached -r .

git reset --hard

git rm .gitattributes

git reset .

git checkout .

https://stackoverflow.com/questions/46704572/error-with-previously-committed-files-which-matches-new-git-lfs-filter

https://stackoverflow.com/questions/46704572/error-with-previously-committed-files-which-matches-new-git-lfs-filter

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: whatever

Share

Link to this answer
Share Copy Link

Contributed on Mar 18 2025

Vast Vulture

0 Answers Avg Quality 2/10

vuetify cdn

Contents

More Related Answers

vuetify cdn

Closely Related Answers

vuetify cdn

Encountered files that should have been pointers, but weren't

Encountered files that should have been pointers, but weren't

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.