LaravelPHP in Hindi

Laravel 7 + VueJS + Vue Router + Vuetify

आज इस आर्टिकल में हम आपको Laravel 7 + VueJS + Vue Router + Vuetify के सेटअप के बारे में बताने जा रहे है जिससे आप अपने प्रोजेक्ट में Vuejs, Vue Router और Vuetify का इस्तेमाल कर सकते है.

Laravel 7 + VueJS + Vue Router + Vuetify
Laravel 7 + 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 और इम्पोर्ट करेंगे.

  1. routes.js
  2. 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 '[email protected]/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 का इस्तेमाल कर सकते है. अगर आपको किसी परेशानी का सामना करना पड़ रहा है तो आप नीचे दिए गए कमेंट करके पूछ सकते है.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close