A Starter Project using Vuetify As A Front End Framework

Vue 2 + TypeScript + Vite + Vuetify

This is a starter project that uses Vuetify as the UI framework. Please use scss version 1.32.12 due to a problem on the Vuetify side.

Vuetify3 version is here.

Description

This template is for using Vue2 with TypeScript in Vite. Includes vue-router and Vuex, vue-property-decorator.

In addition, ESLint, Stylelint, and Prettier are also included and are set to be executed automatically at runtime and commit. (Since these settings are set strictly, please relax yourself.)

Also, when the development server is executed, it is checked in real time by vite-plugin-checker.

Composition API

It also supports the Composition API. The installed VueRouter and Vuex are for Vue2, but you can use the functions (such as useRouter(), useRoute() and useStore()) for the composition API for Vue3.

Of course, Vuetify instance can also be accessed with useVuetify(). In the Composition API, you can handle it in the same way as this.$vuetify by entering const vuetify = useVuetify(); in the setup() function.

It is possible to mix code written in Composition API and code written in vue-property-decolator, but it is not recommended to use them together in the same component. ^1

As a limitation, Vue2's composition api cannot monitor the router with the watch function. In that case, monitor it by the following normal method:

watch: {
  $route: {
    handler(to) {
      //
    },
    immediate: true,
  },
},

If you are thinking of supporting Vue2 and Vue3 both, consider introducing vue-demi.

Vue i18n

If you want to use vue-i18n, please install vue-i18n-composable and call the instance with useI18n().

In addition, the conventional method using $t() written in non composition-api can be used as it is.

Teleport

Vue3 adds a mechanism called Teleport, which allows you to install vue components anywhere. This starter template is for vue2, but you can do the same with vue2-teleport.

However, you will need to manually load the component with import Teleport from 'vue2-teleport'; wherever you want to use it.

Teleport JSON-LD Example

If you want to include JSON-LD, enter as follows.

<template>
  <div class="container">
    ... Some Content
    <teleport to="head">
      <component :is="'script'" type="application/ld+json" v-text="jsonLd" />
    </teleport>
  </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api';

import Teleport from 'vue2-teleport';

export default defineComponent({
  components: {
    Teleport,
  },
  setup() {
    const jsonLd = ref(
      JSON.stringfy({
        '@schema': 'https://json.schemastore.org/jsonld.json',
        '@context': 'http://schema.org',
        '@type': 'WebSite',
        name: 'Vite Vue2 Vuetify TypeScript Startar',
        url: 'https://github.com/logue/vite-vue2-vuetify-ts-starter',
        description: 'Vite Vue2 Vuetify TypeScript Demo Page',
      })
    );

    return {
      jsonLd,
    };
  },
});
</script>

JSON-LD is literally a script, so it can't be embedded directly, so it's a roundabout thing like this, but simple things like meta tags are reflected by simply inserting a tag.

Notice: For Vue3, :as="'script'" becomes is="script".

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Commands

Migrate from VueCli

It also works when migrating from VueCLI.

However, when importing a stylesheet with @import, it cannot be specified from the library directory. Must be specified from ~node_modules/.

Also, if you used the .env file in the previous environment, you need to change the calling part from process.env to import.meta.env after installing vite-plugin-env-compatible separately.

Troubleshooting

When adding or deleting files, an error may occur and even if the error is corrected, it may not be reflected in devserver. In that case, stop devserver and delete all the files in the node_modules/.vite directory. You can also run it with the clean command.

Due to yarn issues, it may not work properly if the path contains non-ASCII characters (such as 日本語 or 한국어, 中文 etc.).

Author: logue
Source code: https://github.com/logue/vite-vue2-vuetify-ts-starter
License: MIT license
#vite #vue #typescript #vuetify 

How to Create a POS Application Product Dashboard with Vuetify.JS and Vue.JS

In this tutorial we'll learn How to Create a POS Application Product Dashboard .
- Vuetify JS and Vue JS
- Using  Javascript | HTML - CSS 
- Card & Div & Button & Image & Toggle & Grid & tab
-Sidebar & Right Sidebar
- Material design icons and Font Awsome icons
----------------------- Commande ----------------------------------
vue create product
cd product
vue add vuetify
npm install material-design-icons-iconfont -D
npm install @fortawesome/fontawesome-free -D
npm run serve
 

Subscribe: https://www.youtube.com/channel/UClbUBqDWE3kzIHaAQ8IOYuQ/featured 

#vue #vuetify #vuejs #javascript #html #css 

How to Create a Portfolio Website using Vuejs and Vuetify

In this video, you will learn how to create a portfolio website using vuejs and vuetify also you will learn how to deploy a website on netlify, In this video, I have shown you how to create a modern portfolio website and how to use vuetify components, also you will learn how to use google material design icon in vuetify project 

Project: - https://github.com/methetushar/portfolio 

Subscribe: https://www.youtube.com/channel/UCqi4PfQ-Wp2oGYQQ_SDC0UQ/featured 

#vue #vuejs #vuetify 

How to create a Responsive E-Grocery Website System with Vuetify.JS Vue.JS

In this tutorial we'll learn How to create a Responsive E-Grocery Website System ( web design ).
- Vuetify JS and Vue JS
- Using  Javascript | HTML - CSS 
- Card & Div & Button & Image & Toggle & Grid
- Navbar & Footer & Section
- Material design icons and Font Awsome icons
----------------------- Commande ----------------------------------
vue create egrocery
cd egrocery
vue add vuetify
npm install material-design-icons-iconfont -D
npm install @fortawesome/fontawesome-free -D
npm run serve
#vue #vuetify #egrocery
-------------------------WebSite------------------------------------
https://vuetifyjs.com/en/
https://vuejs.org/

Subscribe: https://www.youtube.com/channel/UClbUBqDWE3kzIHaAQ8IOYuQ/featured 

#vue #vuetify 

PWA To Track Personal Purchases, No Need To Go To The Supermarket

Sheiley Shop

Content

• Description
• Features
• Get started :star:
• Frontend :heart_eyes:
  • API entry point
  • Frontend production
• Backend :sunglasses:
  • Database
  • Backend production
  • Extra
• Docker

Description

Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket :department_store:

Features

• Multi-user
• Multi-languages
• Very intuitive and easy to use, it has a clean interface with few buttons
• List of products
• Favorite products
• Product categories
• Unit of measurement
• Shopping history
• Shopping cart
• And more...

Get started

Requirements:

• PHP 7.1.2 o superior
• Mysql 5.6
• NodeJs 10
• NPM 6.4
• Composer 1.8

Frontend

$ git clone https://github.com/itsalb3rt/sheiley_shop_app.git

$ npm install 

$ npm run serve
# or run the next command for production
$ npm run build

API entry point

change the API entry pont in env file

VUE_APP_API_DEV=http://localhost/sheiley_shop_api
VUE_APP_API_PRO=https://example.com/sheiley_shop_api

:tada: This is all you need to test it in your local environment!

Frontend production

If you hosted the app in subdirectory go to vue.config.js and set the subdirectory name in publicPath property

Backend

The REST API is made in PHP so a server with PHP 7.1 or higher is required.

$ git clone https://github.com/itsalb3rt/sheiley-shop-api.git

$ composer require itsalb3rt/sheiley-shop-api

Database

Inside the root directory of the REST API enter etc/sheiley_shop.sql this file contains all the script from the database.

After executing the script in the Mysql database, it remains to enter the directory config/config.php.ini and set user database, username and password.

<?php return; ?>
; Database config
host=localhost
user=root
pass=toor
dbname=sheiley_shop
driver=mysql
charset=utf8
collation=utf8mb4_unicode_ci
prefix=""
port=""

Backend production

In the system/webroot/ directory you will find a file named FrontController.php inside this you must modify the constant ENVIROMENT and put the value pro.

Docker

Remember set the .env file vars before.

$ docker-compose up -d

Extra

Inside the etc directory of the API REST repository You will find the entity relationship diagram created in starUML and the prototype created in Adobe XD, you can play with this.

Author: itsalb3rt
Source Code: https://github.com/itsalb3rt/sheiley-shop-app
License: MIT License

#vue #vuetify 

Social Ideation Application to Manage Ideas with Vue, Firebase/Vuetify

Idea Re-Vue 💡

Social ideation platform that helps you brainstorm Ideas. Create, edit, collaborate & share ideas in a fun, visual way 🥳 
TRY IT FREE 🤩

Inspiration 😍

When you write down 10 ideas a day as James Altucher recommends, you will have thousands of ways you can make money and improve your life by the end of the year. Even if 90% of your ideas are total crap, you’ll still have 365 high quality and actionable ideas that can change your life.

Technology Stack 👓

Backend

• Firebase

Frontend

• Vue.Js
• Vuetify (Material Design Vue Framework)

Setup on Local Environment 💻

• Clone the repository git clone https://github.com/MuhaddiMu/Idea-ReVue.git
   
• Install node modules npm install or yarn install
   
• Serve npm run serve or yarn serve

I want to Contribute 🙏

(Glad to see Pull Request Flooded 🤓)
Pull requests and potential features are welcome.

1. Make all changes to your forked branch.
2. Update this README if necessary.
3. Submit a Pull Request and make sure to reference the issue.

Todos 📋

•  Authentication
•  Display My Ideas
•  Display Public Ideas
•  Love Count
•  Update Account
•  Edit, Delete Personal Ideas
•  Idea Search
•  Mark Favourite Idea
•  Idea Favourite Count
•  Replace Content Loaders with Vuetify Content Loaders
•  Report Public Idea
•  Single Idea Sharable Link
•  Idea Collaboration
•  Reactive Page Title
•  Idea Love Count
•  Idea board comments
•  Idea Board Prioritization
•  Customize Dashboard
•  Server Side Rendering with Nuxt.Js
•  Mailing
•  Notifications
•  PWA Support

Feel free to come up with your intuition and update Todo list or let me welcome your PR 🎉

Submit Issues 🐛

Facing any Issues or weird behavior(yes, apps behave)? Feel free to open a new issue and I will ideate on it where I went wrong.

Contributors ✨

Muhammad Muhaddis 🚇 💻 💼

DiegoPette 💻

Umar Farouq Mohammed 🎨

Mark 💻 🎨

kasulejoseph 💻

About The Author 😎

Cyber Security Researcher and Full Stack Developer. Vue, AWS & Laravel are my favorite weapons. Make sure to check out my GitHub I am on a journey to #365DaysOfCode 
Feel free to say 👋 on Twitter @MuhaddiMu and don't forget to land on Muhaddis.Info 
Interested more about me? Read 50 Random Facts About Me 😅

License

MIT Copyright © 2019, Muhammad Muhaddis. All rights reserved.

Author: MuhaddiMu
Source Code: https://github.com/MuhaddiMu/Idea-ReVue
License: MIT License

#vue #firebase #vuetify 

Vuetifyでホバーコンポーネントを使用する

CSS:hover疑似クラスを使用してマウスホバーの要素スタイルをカスタマイズすることもできますが、Vuetifyは、v-hoverコンポーネントを使用してこれを行うための優れた方法を提供します。この記事でそれをどのように使用できるか見てみましょう。

v-hoverを使用する

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card
        class="ma-4 pa-4"
        width="200"
        height="200"
        :elevation="hover ? 12 : 2"
      >
        Hover over me!
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

デフォルトのv-hoverスロットはhover小道具を提供し、その値はホバーコンポーネントの子の現在のホバー状態に応じて変化します。マウスをその上に置いていないときは、hoverそのままfalseです。この場合、カードの標高は2に設定されます。

そして、その上にカーソルを合わせると、ホバーが真になり、カードの高度が12になります。

ホバーオープン遅延

小道具を使ってhover小道具の変更をからfalseに遅らせることができます。以下のコードでは、プロップがマウスホバーから来るまでに200msの遅延を設定するために使用します。trueopen-delayopen-delayhovertrue

<template>
  <v-app>
    <v-hover v-slot="{ hover }" open-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

デフォルト状態のカード。

カードにカーソルを合わせると、カードが上昇します。

ホバークローズ遅延

同様に、プロップを使用して、マウスがプロップを離れた後、hoverプロップをからに遅らせることができます。したがって、マウスがカードを離れた後、高度が下がるまでに200ミリ秒かかります。truefalseclose-delay

<template>
  <v-app>
    <v-hover v-slot="{ hover }" close-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

無効にされたプロップ

disabled小道具でホバー機能を無効にすることができます：

<template>
  <v-app>
    <v-hover v-slot="{ hover }" disabled>
      <v-card
        :elevation="hover ? 12 : 2"
        class="mx-auto"
        height="100"
        max-width="250"
      >
        <v-card-text class="my-4 text-center text-h6">
          Hover disabled
        </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

カードにカーソルを合わせても何も起こりません。

ホバーリスト

ユーザーがリストを操作するときに、組み合わせv-hoverてv-for1つのアイテムを目立たせることができます。

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template><script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

カードの1つ、たとえばBにカーソルを合わせると、目立ちます。

ホバートランジション

このhoverコンポーネントを使用すると、ユーザーの操作に高度にカスタマイズされた方法で応答するコンポーネントを作成できます。例えば：

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card class="ma-4 pa-4" width="300">
        <p class="mb-4">Free music for everyone!</p>
        <v-expand-transition>
          <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
        </v-expand-transition>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

カードにカーソルを合わせると、「サインアップ」ボタンv-expand-transitionを含む余分な部分がスライドアウトします（コンポーネントのおかげで）。

概要

Vuetifyは、v-hover現在のホバー状態に基づいてコンポーネントスタイルの切り替えを処理するためのコンポーネントを提供します。ホバーイベントの検出にかかる時間を遅らせるなどのカスタマイズオプションを提供します。  

リンク：https ：//javascript.plainenglish.io/how-to-use-the-hover-component-in-vuetify-7059cf8724d2

#hover  #vuetify 

Cómo Usar El Componente Hover En Vuetify

Si bien podríamos usar la :hoverpseudoclase de CSS para personalizar los estilos de los elementos al pasar el mouse por encima, Vuetify proporciona una manera ordenada de hacerlo, con el v-hovercomponente. Veamos cómo podemos usarlo en este artículo.

Usando v-hover

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card
        class="ma-4 pa-4"
        width="200"
        height="200"
        :elevation="hover ? 12 : 2"
      >
        Hover over me!
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

La v-hoverranura predeterminada proporciona un hoverapoyo, cuyo valor cambia según el estado de desplazamiento actual del elemento secundario del componente de desplazamiento; cuando el ratón no se ha desplazado sobre él, hoverpermanece false. Para nuestro caso, eso establecerá la elevación de la tarjeta en 2:

Y cuando nos desplazamos sobre él, el desplazamiento se vuelve verdadero y la elevación de la tarjeta se convierte en 12:

Retrasos en la apertura al pasar el mouse

Podemos retrasar el hovercambio de utilería de falsea truecon la open-delayutilería. En el código a continuación, usamos open-delaypara establecer un retraso de 200 ms para que el hoveraccesorio truepase del mouse:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" open-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

La tarjeta en su estado predeterminado.

La tarjeta se eleva cuando pasa el cursor sobre ella

Retrasos de cierre de desplazamiento

Del mismo modo, podemos retrasar el hoveraccesorio de truea falsedespués de que el mouse lo abandone, con el close-delayaccesorio. Entonces, después de que el mouse deja la tarjeta , tomaría 200 ms para que se reduzca su elevación:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" close-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

El accesorio discapacitado

Podemos deshabilitar la funcionalidad de desplazamiento con la disabledpropiedad:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" disabled>
      <v-card
        :elevation="hover ? 12 : 2"
        class="mx-auto"
        height="100"
        max-width="250"
      >
        <v-card-text class="my-4 text-center text-h6">
          Hover disabled
        </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

No sucederá nada cuando coloque el cursor sobre la tarjeta .

Listas flotantes

Podemos combinar v-hovery v-forhacer que un solo elemento se destaque cuando el usuario interactúa con la lista:

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template><script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

Cuando pasamos el cursor sobre una de las tarjetas , digamos B, se destaca:

Transiciones de desplazamiento

Con el hovercomponente, podemos crear componentes que respondan de formas altamente personalizadas a la interacción del usuario. Por ejemplo:

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card class="ma-4 pa-4" width="300">
        <p class="mb-4">Free music for everyone!</p>
        <v-expand-transition>
          <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
        </v-expand-transition>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

Cuando pasa el cursor sobre la tarjeta , la parte adicional que contiene el botón "Registrarse" se desliza hacia afuera (gracias al v-expand-transitioncomponente):

Resumen

Vuetify proporciona el v-hovercomponente para manejar la alternancia de estilos de componentes en función de su estado de desplazamiento actual. Proporciona opciones de personalización, como retrasar el tiempo que tardan en detectarse los eventos de desplazamiento.  

Enlace: https://javascript.plainenglish.io/how-to-use-the-hover-component-in-vuetify-7059cf8724d2

#hover  #vuetify 

Vuetifyでボタンを使用する

ボタンは、ほぼすべてのUIにある要素の1つです。これらは、アプリケーションに対話性を追加する最も一般的な方法です。Vuetifyは、v-btnボタンを作成するためのコンポーネントを提供します。サンプルのVue.jsアプリケーションでこのコンポーネントを使用するさまざまな方法を見てみましょう。

通常のボタン

ここでは、異なる色の3つの等間隔のボタンを作成しました。Vuetifyのほとんどのコンポーネントの色を設定する1つの方法は、colorプロップを使用することです。緑のボタンには、プロパティを追加しdarkてテキストを白にします。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn>Button</v-btn>
      <v-btn color="red">Button</v-btn>
      <v-btn color="green" dark>Button</v-btn>
    </v-row>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

ブロックボタン

block小道具をtrue次のように設定して、ブロックボタンを作成します。

<template>
  <v-app>
    <v-row class="ma-4">
      <v-btn block>Block Button</v-btn>
    </v-row>
  </v-app>
</template>
...

これにより、ボタンが使用可能な幅全体に拡張されます。

押されたボタン

小道具を使用しdepressedてボタンを押すと、ボックスの影が削除されます。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn depressed>Depressed Button</v-btn>
      <v-btn depressed color="yellow">Depressed Button</v-btn>
      <v-btn depressed color="red">Depressed Button</v-btn>
    </v-row>
  </v-app>
</template>
...

アイコンボタン

テキストだけでなく、Vuetifyでアイコンボタンを作成することもできます。小道具はボタンを丸くし、小道具iconを設定した場合に適用されるのと同じスタイルを適用しますtext（この小道具についてはこの投稿の後半で詳しく説明します）。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn color="blue" icon><v-icon>mdi-thumb-up</v-icon></v-btn>
      <v-btn color="red" icon><v-icon>mdi-heart</v-icon></v-btn>
      <v-btn color="yellow" icon><v-icon>mdi-star</v-icon></v-btn>
    </v-row>
  </v-app>
</template>
...

輪郭を描かれたボタン

outlined小道具を使って輪郭のあるボタンを作成できます。これらのタイプのボタンは、適用されている現在の色から境界線を継承します。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn outlined>Outlined Button</v-btn>
      <v-btn color="green" outlined>Outlined Button</v-btn>
      <v-btn color="orange" outlined>Outlined Button</v-btn>
    </v-row>
  </v-app>
</template>
...

プレーンボタン

プレーンボタンはplain小道具で作成されます。ベースラインの不透明度が低く、ホバーまたはフォーカスすると増加します。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn plain>Plain Button</v-btn>
      <v-btn color="red" plain>Plain Button</v-btn>
      <v-btn color="blue" plain>Plain Button</v-btn>
    </v-row>
  </v-app>
</template>
...

丸いボタン

小道具を使用して、rounded通常のボタンと同じように動作するが、エッジが丸いボタンを作成できます。

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn rounded>Rounded Button</v-btn>
      <v-btn rounded color="blue">Rounded Button</v-btn>
      <v-btn rounded color="green">Rounded Button</v-btn>
    </v-row>
  </v-app>
</template>
...

テキストボタン

text小道具で作成されたテキストボタンには、ボックスシャドウと背景がありません。ボタンのコンテナはホバー時にのみ表示され、ボタンに設定された色は背景ではなくテキストに適用されます。

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn text> Normal </v-btn>
      <v-btn text color="primary"> Primary </v-btn>
      <v-btn text color="error"> Error </v-btn>
      <v-btn text disabled> Disabled </v-btn>
    </v-row>
  </v-app>
</template>
...

タイルボタン

タイルボタンは通常のボタンのように機能しますが、境界線の半径はありません。あなたはtile小道具でそれらを作成することができます：

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn tile> Tile Button </v-btn>
      <v-btn tile color="yellow"> Tile Button </v-btn>
      <v-btn tile color="blue"> Tile Button</v-btn>
    </v-row>
  </v-app>
</template>
...

サイジングボタン

これらのバリエーションとは別に、Vuetifyには、さまざまなシナリオに適合するさまざまなボタンサイズ設定オプションも用意されています。

<template>
  <v-app>
    <div class="ma-2">
      <v-btn x-small color="secondary" dark> Extra small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn small color="primary" dark> Small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="warning" dark> Normal Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="error" dark large> Large Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn x-large color="success" dark> Extra large Button </v-btn>
    </div>
  </v-app>
</template>
...

概要

ボタンはいたるところにあります。v-btnVuetifyのコンポーネントを使用すると、それらを作成でき、バリアントの変更やサイズの変更など、さまざまなカスタマイズオプションを使用できます。

リンク：https：//javascript.plainenglish.io/how-to-use-buttons-in-vuetify-37e4e28d2548

#vuetify 

Cómo Usar Botones En Vuetify

Los botones son uno de esos elementos que encuentras en casi todas las IU. Son la forma más habitual de añadir interactividad a una aplicación. Vuetify proporciona el v-btncomponente para crear botones. Veamos las diferentes formas en que podemos usar este componente en una aplicación Vue.js de muestra.

Botones regulares

Aquí, hemos creado tres botones espaciados uniformemente de diferentes colores. Una forma de establecer el color de la mayoría de los componentes en Vuetify es con el coloraccesorio. Para el botón verde, agregamos la darkpropiedad para hacer que su texto sea blanco.

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn>Button</v-btn>
      <v-btn color="red">Button</v-btn>
      <v-btn color="green" dark>Button</v-btn>
    </v-row>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

Botones de bloque

Creamos botones de bloque configurando el blockaccesorio en true:

<template>
  <v-app>
    <v-row class="ma-4">
      <v-btn block>Block Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Esto hace que el botón se extienda a todo su ancho disponible:

Botones deprimidos

Usar el depressedaccesorio para presionar un botón elimina la sombra del cuadro:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn depressed>Depressed Button</v-btn>
      <v-btn depressed color="yellow">Depressed Button</v-btn>
      <v-btn depressed color="red">Depressed Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Botones de iconos

No estamos limitados solo a texto, también podemos crear botones de iconos en Vuetify. El iconaccesorio hace que el botón se redondee y aplica los mismos estilos que se aplicarían si configuramos el textaccesorio (más sobre este accesorio más adelante en esta publicación).

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn color="blue" icon><v-icon>mdi-thumb-up</v-icon></v-btn>
      <v-btn color="red" icon><v-icon>mdi-heart</v-icon></v-btn>
      <v-btn color="yellow" icon><v-icon>mdi-star</v-icon></v-btn>
    </v-row>
  </v-app>
</template>
...

Botones contorneados

Podemos crear botones delineados con el outlinedaccesorio. Este tipo de botones heredan sus bordes del color actual aplicado:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn outlined>Outlined Button</v-btn>
      <v-btn color="green" outlined>Outlined Button</v-btn>
      <v-btn color="orange" outlined>Outlined Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Botones lisos

Los botones simples se crean con el plainaccesorio. Tienen una opacidad de línea de base baja que aumenta cuando se desplaza o se enfoca en ellos:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn plain>Plain Button</v-btn>
      <v-btn color="red" plain>Plain Button</v-btn>
      <v-btn color="blue" plain>Plain Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Botones redondeados

Usando la roundedpropiedad, podemos crear botones que se comporten igual que los botones normales, pero que tengan bordes redondeados:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn rounded>Rounded Button</v-btn>
      <v-btn rounded color="blue">Rounded Button</v-btn>
      <v-btn rounded color="green">Rounded Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Botones de texto

Los botones de texto, creados con la textpropiedad, no tienen sombra de cuadro ni fondo. El contenedor para el botón solo se muestra al pasar el mouse por encima y el conjunto de colores para el botón se aplica a su texto en lugar de a su fondo:

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn text> Normal </v-btn>
      <v-btn text color="primary"> Primary </v-btn>
      <v-btn text color="error"> Error </v-btn>
      <v-btn text disabled> Disabled </v-btn>
    </v-row>
  </v-app>
</template>
...

Botones de mosaico

Los botones de mosaico actúan como botones normales pero no tienen radio de borde. Puedes crearlos con el tileaccesorio:

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn tile> Tile Button </v-btn>
      <v-btn tile color="yellow"> Tile Button </v-btn>
      <v-btn tile color="blue"> Tile Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Botones de tamaño

Además de estas variantes, Vuetify también nos brinda una gama de opciones de tamaño de botón para adaptarse a una multitud de escenarios:

<template>
  <v-app>
    <div class="ma-2">
      <v-btn x-small color="secondary" dark> Extra small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn small color="primary" dark> Small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="warning" dark> Normal Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="error" dark large> Large Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn x-large color="success" dark> Extra large Button </v-btn>
    </div>
  </v-app>
</template>
...

Resumen

Los botones están por todas partes. El v-btncomponente de Vuetify nos permite crearlos y habilita varias opciones de personalización, como alterar la variante o modificar el tamaño.

Enlace: https://javascript.plainenglish.io/how-to-use-buttons-in-vuetify-37e4e28d2548

#vuetify 

ToDo List Sample App Based on Vue + Vuex + Vuetify + Vee-Validate

Vue ToDo List

A sample app to demonstrate Vue + Vuex + Vuetify + Vee-Validate features. See demo

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

Customize configuration

See Configuration Reference.

Author: alexander-elgin
Source Code: https://github.com/alexander-elgin/vue-todo-list
License: MIT

#vuex #vue #vuetify 

How to Design a Sprint Report System App using Vuetify and Vue.js

Vuejs - Vuetify  UI Design, Sprint Report System - Dashboard - Javascript | HTML - CSS | Vue-ECharts

In this tutorial we'll learn How to design a Sprint Report Systemapplication ( web design ) using vuetify and  vue.js  , material design icons, Font Awsome icons, Sidebar, Card,  Aavatar, list item, Item Group.
using also Javascript | HTML - CSS | Vue-ECharts
----------------------- Commande -------------------
vue create sprint
cd sprint
vue add vuetify
npm install material-design-icons-iconfont -D
npm install @fortawesome/fontawesome-free -D
npm install echarts vue-echarts
npm i -D @vue/composition-api
npm run serve
------------------------Code Source--------------------
github: https://bit.ly/vuejsvuetifysprint 
--------------------------------------------------------------
#vue #vuetify 

Vuetify 3: Titan

Vuetify 3: Titan

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.

Vuetify 3 Alpha

Vuetify 3 Alpha is here! Below is a collection of information to help you get started and answer some frequently asked questions regarding the alpha.

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

Installation

Installation of the alpha is limited to new cli projects at this time and intended primarily for testing. If you have any questions or run into issues, please reach out to our Discord community.

vue-cli

In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli.

Once installed, generate a project with the following command using the vue-cli 4.0:

vue create my-app

When prompted, choose Vue 3 (possibly Vue 3 Preview depending on the exact version of vue-cli):

? Please pick a preset: (Use arrow keys)
    Default ([Vue 2] babel, eslint)
  ❯ Default (Vue 3) ([Vue 3] babel, eslint)
    Manually select features

It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.

Next, navigate to your project directory and add Vuetify to your project:

cd my-app
vue add vuetify

Once prompted, choose Vuetify 3 Preview:

? Choose a preset:
  Configure (advanced)
  Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
❯ Vuetify 3 Preview (Vuetify 3)

Vite

Installing Vuetify 3 using vite can be done using vue-cli. To start, use npm/yarn to set up your vite project outlined in the Vite documentation:

# npm 6.x
npm init @vitejs/app my-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-app -- --template vue

# yarn
yarn create @vitejs/app my-app --template vue

Next, navigate to your project directory and add Vuetify to your project:

cd my-app
vue add vuetify

Once prompted, choose Preview (Vuetify 3 + Vite):

? Choose a preset:
  Configure (advanced)
  Default (recommended)
❯ Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)

Usage

With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount('#app')

Frequently asked questions

What is included in the alpha?

Currently most base functionality of Vuetify is included in the alpha. This includes core services such as theme, configuration, and layout. A small subset of base components are also included such as grid system, sheets, and buttons. For full list of available components, visit the UI Component and API sections.

When will Vuetify 3 be released?

Version 3 is currently under development - Alpha is the first step toward this. Follow our progress via our project on Github or read an overview of what’s to come on our Roadmap.

Can I use it with Vite?

Yes. We recommend creating a new project using the vite installation instructions.

How to report an issue or bug

For bugs related to the Alpha, please create an issue via our Issue Generator using the following Reproduction Template. At this time we are only accepting bugs for the following:

• Vuetify components and functions available in the Alpha
• Documentation content

We ask that documentation issues remain related to content only. The next documentation is a work in progress and not fully updated to Vue 3. Some features may be missing or not functioning and will be constantly worked on as new components and functionality becomes available. We will begin fielding these bugs closer to Phase 3 as things become stable.

How to connect with Vuetify team

The Vuetify team can be reached via Discord Community. If you have questions or would like to discuss Vuetify 3, come visit the #v3-discussion channel.

#vue #vuetify 

Laravel Viltify: A Starter Kit that Integrates Laravel with Vue CLI, Inertia.js, Tailwind CSS and Vuetify

Laravel Viltify

Laravel Viltify is a heavily opinionated Laravel starter kit. It's intent is to seamlessly integrate Vue, Inertia.js, Laravel, TailwindCSS and Vuetify, so you don't waste your time learning how to do it and focus on writing your application, leaving setup behind.

Requirements

Operating System: This package should work on MacOS and Linux. If you're using Windows, you're gonna need WSL.

Vue CLI: Under the hood, this package will call the Vue CLI tool. Make sure you have Vue CLI V4 installed before continuing. If you don't, don't worry. The installation is fairly simple.

Quick Start

HEADS UP: this package is meant to be used ONLY ON FRESH LARAVEL INSTALLATIONS.

# Create a new Laravel project
composer create-project laravel/laravel my-app

# Enter the project folder
cd my-app

# Install Laravel Viltify
composer require dalpizzol/laravel-viltify

# Create your base tables
php artisan migrate

# Run the installer
php artisan viltify:install

# Remove the package so you don't accidentally run it again in the future
composer remove dalpizzol/laravel-viltify

# Enter the resources folder
cd resources

# Lift the devserver
npm run serve

HEADS UP: By the default, the devserver will lift at port 8080.

Why would I use this instead of Laravel Breeze or Laravel Jetstream?

This package is actually heavily based on Laravel Breeze. A lot of code was simply ripped off that. But there's some advantages here:

Vue CLI instead of Laravel Mix

This package actually turns your resources folder into a Vue app generated by Vue CLI. This means that inside resources you can do things like vue add some-vue-cli-plugin which you can't when using Laravel Mix. Vue CLI is also much more stable than Laravel Mix and much more focused and battle tested for use with Vue, so you are probably going to save some time avoiding common issues related to Laravel Mix.

This also allows you to use Vue CLI's GUI inside resources, if that's your thing...

Vuetify's full power in your hands

While official Laravel starter kits delivers a dozen Vue components, they are fairly simple. Laravel Viltify comes with Vuetify UI component library already installed and configured so you can take advantage of 70+ highly customizable, responsive and beautiful components based on Google's Material Design.

The perfect Marriage between Vuetify and TailwindCSS

Laravel Viltify comes with Vuetify and TailwindCSS already configured so you can use both without worrying about class collisions. All you have to do is to prefix your tailwind classes with tw-.

Inertia.js conveniences

The v-link global component

Laravel Viltify offers a globally registered v-link component which is a Vuetify v-btn component wrapped by an Inertia.js Link component. This way you can use Inertia.js links everywhere without having to remember to include the Link component locally on every component and they can use every style available to v-btn components. Inertia's Link component is also registered globally.

<v-link :href="someUrl" color="success" rounded outlined x-large>This is an Inertia.js link</v-link>

Server driven toast notifications

It also ships with a server driven toast notification system specifically crafted to work nicely with Inertia.js. This means you can do things like this:

// Success message
return redirect()
  ->route('dashboard')
  ->toast('Laravel Viltify is awesome');

// Error message
return redirect()
  ->route('dashboard')
  ->toast('You didn\'t give Laravel Viltify a star. =(', 'error');

Easily create custom endpoints

If you need a separate build for an entirely different endpoint, for instance, and admin area, you can use the pages prop at resources/vue.config.js.

  pages: {
    ...page('main', 'app'),
    ...page('admin', 'app-admin')
  },
  // The following disables prefetch links generation for each endpoint
  chainWebpack: config => {
    config.plugins.delete('prefetch-main'),
    config.plugins.delete('prefetch-admin')
  }

Then, you need to instruct Inertia to use the app-admin.blade.php view when rendering an admin page.

return Inertia::setRootView('app-admin')
  ->render('admin/Dashboard');

Isolated client side environment settings

When using Laravel Mix, client side environment settings are put into MIX_ prefixed variables inside .env file. Here, since our resources folder is actually a Vue CLI generated app, you can leverage the pattern shipped by Vue CLI do deal with environment variables. Laravel Viltify comes out of the box with a resources/.env.local for the devserver and a resources/.env.production example file, so you can deal with every client side setting separated from Laravel settings.

Resonable defaults with production builds in mind

Code Splitting out of the box

Since we're dealing with SPAs, Laravel Viltify makes sure that code splitting takes place. All the files needed by any route are loaded on demand by default.

Material Design Icons JS SVG instead of WebFont

By default Vuetify comes configured to use @mdi/js instead of a regular WebFont, so it enforces that you only ever load the icons you really need. Learn more here.

Download Details:
Author: MtDalPizzol
Official Website: https://github.com/MtDalPizzol/laravel-viltify 
License: MIT
 

#laravel #vue #inertia #tailwindcss #vuetify

Design POS System for Coffee Shop Application using Vuetify and Vue.js

In this tutorial we'll learn How to design a POS System for Coffee Shop application ( web design ) using vuetify and  vue.js  , material design icons, Font Awsome icons, Sidebar, Card,  Aavatar, list item, Item Group.

npm install material-design-icons-iconfont -D
npm install @fortawesome/fontawesome-free -D
npm run serve

Subscribe: https://www.youtube.com/channel/UClbUBqDWE3kzIHaAQ8IOYuQ/featured 

#vue #vuetify