आज इस आर्टिकल में हम आपको Laravel 7 + VueJS + Vue Router + Vuetify के सेटअप के बारे में बताने जा रहे है।
- जिससे आप अपने प्रोजेक्ट में Vuejs, Vue Router और Vuetify का इस्तेमाल कर सकते है।
Laravel 7 + VueJS + Vue Router + Vuetify
सबसे पहले आपको एक नया प्रोजेक्ट compose करना होगा। इसके लिए आप नीचे दी गयी कमांड का इस्तेमाल कर सकते है।
Compose New Laravel Project
//अगर आपने laravel globally इनस्टॉल नहीं किया है तो इस कमांड का इस्तेमाल करें composer create-project --prefer-dist laravel/laravel project-name //अगर आपने laravel globally इनस्टॉल किया है तो इस कमांड का इस्तेमाल करें laravel new project-name
Laravel JavaScript & CSS Scaffolding
इसका जब हम नया project compose करते है तो उसमें css और js की scaffolding नहीं होती है। Laravel 6 के बाद में इसे अलग कर दिया गया था। तो इसके लिए आपको नीचे कमांड दे रहे है इन्हें इस्तेमाल करें।
//सबसे पहले Laravel UI package को इनस्टॉल करें composer require laravel/ui //इसके बाद में आप vue UI को scaffold करें. आप बिना --auth flag के भी इसे इस्तेमाल कर सकते है. php artisan ui vue --auth // अब अपने प्रोजेक्ट में npm installtion करें. npm install // इसके बाद में आप npm run watch की command का इस्तेमाल करें इससे आपके प्रोजेक्ट में जो भी change होंगे ये अपने आप compile कर लेगा. npm run watch
Vue Router और Vuetify Package
अब हमें अपने project में Vue Router और Vuetify package को इनस्टॉल करना होगा जिसके लिए हम नीचे दी गयी कमांड का इस्तेमाल करेंगे।
//Vue router npm i vue-router --save // vuetify npm i vuetify --save
Add Vue Router & Vuetify to Laravel Project
सबसे पहले आपको अपने project के Resource folder में JS folder में जाना है।
इसके बाद में आपको यहाँ दो फाइल बनानी है।
इसके अलावा हम अपने SCSS के app.scss में kuch files को import करेंगे जो की हमारे vuetify project के लिए जरुरी है। लेकिन उससे पहले हम इन दो फाइल को create और इम्पोर्ट करेंगे।
- routes.js
- vuetify.js
routes.js
window.Vue = require('vue');
import VueRouter from 'vue-router';
import Home from './components/routes/Home.vue';
import Login from './components/routes/Login.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/login', component: Login }
];
//router assign
const routers = new VueRouter({
mode: 'history',
routes
});
export default routers;
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const opts = {
}
export default new Vuetify(opts)
इसके बाद में आप इन फाइल्स को अपनी main फाइल जो की पहले ही बनी हुई है app.js में इम्पोर्ट करें।
app.js
require('./bootstrap');
//Route Components
import Route from './routes.js';
import vuetify from './vuefity.js';
const app = new Vue({
el: '#app',
router: Route,
vuetify,
});
इसके बाद में आप अपने नए फाइल्स जो की आप components या फिर अपने किसी custom folder के अन्दर बनाते है।उनको अपने Routes.js फाइल में ऐड करते जाए जैसा की हमने routes.js फाइल में किये है।
app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
@import 'variables';
//adding vuetify and material design icons
@import '~vuetify/dist/vuetify.min.css';
@import '~@mdi/font/css/materialdesignicons.min.css';
नीचे हम आपको एक Vue File का demo दे रहे है जिससे आपको पता लग जाएगा की कैसे आप Vue में vuetify
कोड को use कर सकते है।
Login.vue
<template>
<v-app>
<v-bottom-navigation :value="activeBtn" grow color="indigo">
<v-btn value="recent">
<span>Recent</span>
<v-icon>mdi-history</v-icon>
</v-btn>
<v-btn value="favorites">
<span>Favorites</span>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn value="nearby">
<span>Nearby</span>
<v-icon>mdi-map-marker</v-icon>
</v-btn>
</v-bottom-navigation>
</v-app>
</template>
<script>
export default {
data() {
return {
activeBtn: 1
};
},
mounted() {
// console.log("Component Mounted");
},
computed: {
//
},
methods: {
//
}
};
</script>
इसके अलावा आपको कुछ नहीं करना है अब आपको थोडा vuetify के बारे में जानकारी लेनी जरुरी है।
अगर आपको bootstrap के बारे में पता है तो आप 4 से 5 दिन में इसे आसानी से सीख सकते है।
Final Word
- तो इस तरह से आप अपने project में VueJS + Vue Router + Vuetify का इस्तेमाल कर सकते है।
- अगर आपको किसी परेशानी का सामना करना पड़ रहा है।
- तो आप नीचे दिए गए कमेंट करके पूछ सकते है।
इसे भी पढ़े – पत्ता गोभी से रोगों का इलाज – Cabbage in Hindi
