1656658800
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.
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.
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.
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.
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.
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"
.
VSCode + Volar (and disable Vetur).
Command | Description |
---|---|
dev | Start devserver. |
clean | Clear devserver cache. |
lint | Run ESLint and prettier. |
lint:style | Run Stylelint. |
lint:markup | Check vue markup. |
build | Build for production. |
build:analyze | Execute Bundle Analyzer |
build:deploy | Build for production without checking. |
build:clean | Clear production build files. |
preview | Run the program generated by the production build. |
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.
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
1648696002
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
1647505946
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
1645949287
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
1644325200
Sheiley Shop is a PWA to track personal purchases, No more paper and pencil to go to the supermarket :department_store:
Requirements:
$ 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
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!
If you hosted the app in subdirectory go to vue.config.js
and set the subdirectory name in publicPath
property
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
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=""
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
.
Remember set the .env
file vars before.
$ docker-compose up -d
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
1644210000
Social ideation platform that helps you brainstorm Ideas. Create, edit, collaborate & share ideas in a fun, visual way 🥳
TRY IT FREE 🤩
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.
Backend
Frontend
git clone https://github.com/MuhaddiMu/Idea-ReVue.git
npm install
or yarn install
npm run serve
or yarn serve
(Glad to see Pull Request Flooded 🤓)
Pull requests and potential features are welcome.
Feel free to come up with your intuition and update Todo list or let me welcome your PR 🎉
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.
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 😅
MIT Copyright © 2019, Muhammad Muhaddis. All rights reserved.
Author: MuhaddiMu
Source Code: https://github.com/MuhaddiMu/Idea-ReVue
License: MIT License
1643780520
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-for
1つのアイテムを目立たせることができます。
<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
1643477640
Si bien podríamos usar la :hover
pseudoclase 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-hover
componente. 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-hover
ranura predeterminada proporciona un hover
apoyo, 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, hover
permanece 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 hover
cambio de utilería de false
a true
con la open-delay
utilería. En el código a continuación, usamos open-delay
para establecer un retraso de 200 ms para que el hover
accesorio true
pase 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 hover
accesorio de true
a false
después de que el mouse lo abandone, con el close-delay
accesorio. 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 disabled
propiedad:
<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-hover
y v-for
hacer 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 hover
componente, 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-transition
componente):
Resumen
Vuetify proporciona el v-hover
componente 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
1642957200
ボタンは、ほぼすべての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-btn
Vuetifyのコンポーネントを使用すると、それらを作成でき、バリアントの変更やサイズの変更など、さまざまなカスタマイズオプションを使用できます。
リンク:https://javascript.plainenglish.io/how-to-use-buttons-in-vuetify-37e4e28d2548
1642806300
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-btn
componente 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 color
accesorio. Para el botón verde, agregamos la dark
propiedad 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 block
accesorio 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 depressed
accesorio 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 icon
accesorio hace que el botón se redondee y aplica los mismos estilos que se aplicarían si configuramos el text
accesorio (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 outlined
accesorio. 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 plain
accesorio. 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 rounded
propiedad, 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 text
propiedad, 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 tile
accesorio:
<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-btn
componente 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
1642701600
A sample app to demonstrate Vue + Vuex + Vuetify + Vee-Validate features. See demo
yarn install
yarn run serve
yarn run build
yarn run test
yarn run lint
yarn run test:unit
Author: alexander-elgin
Source Code: https://github.com/alexander-elgin/vue-todo-list
License: MIT
1641178172
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
1640313615
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 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 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.
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)
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)
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')
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.
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:
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.
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
1639540316
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.
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.
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
.
This package is actually heavily based on Laravel Breeze. A lot of code was simply ripped off that. But there's some advantages here:
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...
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.
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-
.
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>
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');
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');
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.
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.
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
1637822602
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