Kategori: laravel vue

laravel 10 – vite vue ders 4

temel ayarlar ile ilgili bir dosya oluştur. adını jsconfig.json yap. aşağıdaki kodu yaz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "resources/js/*"
      ]
    },
    "jsx": "preserve",
  },
  "exclude": [
    "node_modules",
    "public"
  ]
}

bir önceki sayfada import MainLayout from ‘@/Pages/Layouts/MainLayout.vue’ kodunu eklemiştiktik ya bu @ işareti verisini buradan çekecek.

npm install –save-dev eslint eslint-plugin-vue çalıştır.

yine ana klasöre .eslintrc.js dosyası oluştur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
module.exports = {
    extends: ['eslint:recommended', 'plugin:vue/vue3-recommended'],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    env: {
        amd: true,
        browser: true,
        es6: true,
    },
    rules: {
        indent: ['error', 2],
        quotes: ['warn', 'single'],
        semi: ['warn', 'never'],
        'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
        'comma-dangle': ['warn', 'always-multiline'],
        'vue/multi-word-component-names': 'off',
        'vue/max-attributes-per-line': 'off',
        'vue/no-v-html': 'off',
        'vue/require-default-prop': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/html-self-closing': [
            'warn',
            {
                html: {
                    void: 'always',
                    normal: 'always',
                    component: 'always',
                },
            },
        ],
        'vue/no-v-text-v-html-on-component': 'off',
    },
}

package.json dosyasını aç. script dizisinin içine

“fix:eslint”: “eslint –ext .js, .vue resources/js/ –fix”

ekle. sonra npm run fix:eslint ve npm run build sırasıyla bu kodları çalıştır. tamamdır.

laravel 10 – vite vue ders 3

layouts eklemek için;

Pages içine layouts ekle. Index içine Index.vue ve show adı altında 2 dosya oluştur. sırasıyla kodları;

layouts;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <Link href="/">Main Page</Link>&nbsp;
    <Link href="/hello">Show Page</Link>
    <div>The page with time {{timer}}</div>
    <slot>Default</slot>
</template>
 
<script setup>
import {Link} from '@inertiajs/vue3'
import {ref} from 'vue'
 
const timer = ref(0);
setInterval(() => timer.value++,1000);
</script>

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div>Index</div>
    <Link href="/hello">Hello Page</Link>
    <div>
        The message is {{ message }}
    </div>
 
</template>
 
<script setup>
import {Link} from '@inertiajs/vue3'
defineProps({message:String})
</script>

show.vue

1
2
3
4
5
6
7
8
<template>
    <div>Show</div>
    <Link href="/">Main Page</Link>
</template>
 
<script setup>
import {Link} from '@inertiajs/vue3'
</script>

bide app.js var her sayfada manilayout gözüksün diye;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import MainLayout from '@/Pages/Layouts/MainLayout.vue'
 
createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({
            render: () => h(MainLayout, {}, [h(App, props)])
        })
            .use(plugin)
            .mount(el)
    },
})

laravel 10 vue 3 vite kurulumu

ilk laravel kur.

npm install –save-dev vue @vitejs/plugin-vue

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                base: null,
                includeAbsolute: false
            }
        })
    ],
});

npm run dev yap bi gör abim çalışıp çalışmadığını.

composer require inertiajs/inertia-laravel

welcome.blade.phpye aşağıdaki kodu yaz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel Zero</title>
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

https://inertiajs.com/client-side-setup (burada vue3 kısmından kurabilirsiniz şimdiki halini sırayla yazıyorum)

npm install @inertiajs/vue3

bootstrap.js’i sil resources/js içindeki. çöp o. kullanmayacağız.

app.js’e aşağıdaki kodu yazabilirsin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
 
createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

web.php içindeki route’u sil.

böylelikle bomboş 404 hatası aldığımız sayfa kalacak sadece geriye.

laravel vue login register auth kontrolü

hemen login ve register controller oluşturuyoruz. login içine;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public function login(Request $request)
    {
        $request->validate([
            'email' => ['required', 'email'],
            'password' => ['required']
        ]);
 
        if (Auth::attempt($request->only('email', 'password'),true)){
            return response()->json(Auth::user(), 200);
        }
        throw ValidationException::withMessages([
            'email' =>['The provided credentials are incorect.']
        ]);
    }
    public function logout()
    {
        Auth::logout();
        return redirect('/');
    }

register

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public function register(Request $request)
    {
        $request->validate([
            'name' => ['required'],
            'email' => ['required', 'email', 'unique:users'],
            'password' =>['required', 'min:6', 'confirmed']
        ]);
 
        User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password)
        ]);
    }

api.php

1
2
3
4
5
6
7
Route::middleware('auth:sanctum')->get('/authenticated', function () {
    return true;
});
Route::post('register', 'App\Http\Controllers\RegisterController@register');
Route::post('login', 'App\Http\Controllers\LoginController@login');
Route::post('logout', 'App\Http\Controllers\LoginController@logout')->name("logout");

routes.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
        path: "/platform-users",
        name: "PlatformUsersIndex",
        component: PlatformUsersIndex,
        meta: {
            title: 'Platform Üyeleri',
            description:"Deneme",
            isLogin:true,
            isAdmin:true,
        },
    },
{
        path: '/register',
        component: Register,
        meta: {
            title: 'Register',
 
        }
    },
{
        path: '/login',
        component: Login,
        name: 'Login',
        meta: {
            title: 'Login',
        }
},

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const router = new VueRouter({
    mode: "history",
    routes: routes
});
router.beforeEach((to, from, next) => {
    if(to.path == "/login" || to.path == "/register"){
        axios.get('/api/authenticated').then(()=>{
            return next({ name: 'PlatformUsersIndex'})
        }).catch(()=>{
            next()
        })
    }
    if(to.meta.isLogin == true){
        axios.get('/api/authenticated').then(()=>{
            next()
        }).catch(()=>{
            return next({ name: 'Login'})
        })
    }
    document.title = to.meta.title
    next();
})
 
 
const app = new Vue({
    el: "#app",
    router: router
});

laravel validation vue form is-invalid & error messages

laravelden dönen çeşitli hata mesajlarını formda is-invalid olarak göstermeyi anlatmaya çalışıyorum. daha çok yeniyim kodun eskidiğini düşünürseniz kapatın bu sayfayı.

ilk önce ilgili componentin data bölümüne field ve errors ekleyin.

1
2
3
4
5
6
data() {
        return {
            fields: [],
            errors: [],
        };
    },

örnek bir method da bu olsun;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
storeAccountUser() {
            axios
                .post("/api/AccountUser", {
                    username: this.form.username,
                    name: this.form.name,
                    api_key: this.form.api_key,
                    api_secret: this.form.api_secret,
                    platform: this.form.platform,
                })
                .then(res => {
                    this.$router.push({ name: "PlatformUsersIndex" });
                }).catch(error => {
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors || {};
                }
            });
        },

burada 422li kısım bizim işimizi görüyor. 422 ile dönüyor çünkü laravel validation hataları.

template içindeki forma geliyoruz. örnek username satırını koyuyorum sadece gerisi sizde.

1
2
3
4
5
  <div class="form-group" style="margin-top: 10px">
                            <label>API Key</label>
                            <input type="text" :class="{ 'form-control is-invalid':errors.api_key,'form-control':!errors.api_key }" id="api_key" v-model="form.api_key"  placeholder="API Key">
                            <div v-if="errors.api_key" class="text-danger">{{ errors.api_key[0] }}</div>
                        </div>

daha kolayını bulan varsa iletebilir. şimdilik işimizi görür bence. yok frontende ayrı validation, backende ayrı. boş boş uğraşmayın amk. backend düşünsün. hata olursa iletir zaten.

employees create vue #3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<template>
    <div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">
                            Create Employees
                            <router-link
                                :to="{ name: 'EmployeesIndex' }"
                                class="float-right"
                                >Back</router-link
                            >
                        </div>
 
                        <div class="card-body">
                            <form @submit.prevent="storeEmployee">
                                <div class="form-group row">
                                    <label
                                        for="first_name"
                                        class="col-md-4 col-form-label text-md-right"
                                        >First Name</label
                                    >
 
                                    <div class="col-md-6">
                                        <input
                                            id="first_name"
                                            v-model="form.first_name"
                                            type="text"
                                            class="form-control "
                                            required
                                        />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="middle_name"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Middle Name</label
                                    >
 
                                    <div class="col-md-6">
                                        <input
                                            id="middle_name"
                                            v-model="form.middle_name"
                                            type="text"
                                            class="form-control "
                                            required
                                        />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="last_name"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Last Name</label
                                    >
 
                                    <div class="col-md-6">
                                        <input
                                            id="last_name"
                                            v-model="form.last_name"
                                            type="text"
                                            class="form-control "
                                            required
                                        />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="address"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Address</label
                                    >
 
                                    <div class="col-md-6">
                                        <input
                                            id="address"
                                            v-model="form.address"
                                            type="text"
                                            class="form-control "
                                            required
                                        />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="country"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Country</label
                                    >
 
                                    <div class="col-md-6">
                                        <select
                                            v-model="form.country_id"
                                            @change="getStates()"
                                            name="country"
                                            class="form-control"
                                            aria-label="Default select example"
                                        >
                                            <option
                                                v-for="country in countries"
                                                :key="country.id"
                                                :value="country.id"
                                                >{{ country.name }}</option
                                            >
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="state"
                                        class="col-md-4 col-form-label text-md-right"
                                        >State</label
                                    >
 
                                    <div class="col-md-6">
                                        <select
                                            v-model="form.state_id"
                                            @change="getCities()"
                                            name="state"
                                            class="form-control"
                                            aria-label="Default select example"
                                        >
                                            <option
                                                v-for="state in states"
                                                :key="state.id"
                                                :value="state.id"
                                                >{{ state.name }}</option
                                            >
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="department"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Department</label
                                    >
 
                                    <div class="col-md-6">
                                        <select
                                            v-model="form.department_id"
                                            name="department"
                                            class="form-control"
                                            aria-label="Default select example"
                                        >
                                            <option
                                                v-for="department in departments"
                                                :key="department.id"
                                                :value="department.id"
                                                >{{ department.name }}</option
                                            >
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="city"
                                        class="col-md-4 col-form-label text-md-right"
                                        >City</label
                                    >
 
                                    <div class="col-md-6">
                                        <select
                                            v-model="form.city_id"
                                            name="city"
                                            class="form-control"
                                            aria-label="Default select example"
                                        >
                                            <option
                                                v-for="city in cities"
                                                :key="city.id"
                                                :value="city.id"
                                                >{{ city.name }}</option
                                            >
                                        </select>
                                    </div>
                                </div>
 
                                <div class="form-group row">
                                    <label
                                        for="zip_code"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Zip Code</label
                                    >
 
                                    <div class="col-md-6">
                                        <input
                                            id="zip_code"
                                            v-model="form.zip_code"
                                            type="text"
                                            class="form-control "
                                            required
                                        />
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="zip_code"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Birthdate</label
                                    >
                                    <div class="col-md-6">
                                        <datepicker
                                            v-model="form.birthdate"
                                            input-class="form-control"
                                        ></datepicker>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label
                                        for="zip_code"
                                        class="col-md-4 col-form-label text-md-right"
                                        >Date Hired</label
                                    >
                                    <div class="col-md-6">
                                        <datepicker
                                            v-model="form.date_hired"
                                            input-class="form-control"
                                        ></datepicker>
                                    </div>
                                </div>
                                <div class="form-group row mb-0 mt-4">
                                    <div class="col-md-6 offset-md-4">
                                        <button
                                            type="submit"
                                            class="btn btn-primary"
                                        >
                                            Store
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import Datepicker from "vuejs-datepicker";
import moment from "moment";
export default {
    components: {
        Datepicker
    },
    data() {
        return {
            countries: [],
            states: [],
            departments: [],
            cities: [],
            form: {
                first_name: "",
                last_name: "",
                middle_name: "",
                address: "",
                country_id: "",
                state_id: "",
                department_id: "",
                city_id: "",
                zip_code: "",
                birthdate: null,
                date_hired: null
            }
        };
    },
    created() {
        this.getCountries();
        this.getDepartments();
    },
    methods: {
        getCountries() {
            axios
                .get("/api/employees/countries")
                .then(res => {
                    this.countries = res.data;
                })
                .catch(error => {
                    console.log(console.error);
                });
        },
        getStates() {
            axios
                .get("/api/employees/" + this.form.country_id + "/states")
                .then(res => {
                    this.states = res.data;
                })
                .catch(error => {
                    console.log(console.error);
                });
        },
        getCities() {
            axios
                .get("/api/employees/" + this.form.state_id + "/cities")
                .then(res => {
                    this.cities = res.data;
                })
                .catch(error => {
                    console.log(console.error);
                });
        },
        getDepartments() {
            axios
                .get("/api/employees/departments")
                .then(res => {
                    this.departments = res.data;
                })
                .catch(error => {
                    console.log(console.error);
                });
        },
        storeEmployee() {
            axios
                .post("/api/employees", {
                    first_name: this.form.first_name,
                    middle_name: this.form.middle_name,
                    last_name: this.form.last_name,
                    address: this.form.address,
                    country_id: this.form.country_id,
                    state_id: this.form.state_id,
                    city_id: this.form.city_id,
                    department_id: this.form.department_id,
                    zip_code: this.form.zip_code,
                    birthdate: this.format_date(this.form.birthdate),
                    date_hired: this.format_date(this.form.date_hired)
                })
                .then(res => {
                    this.$router.push({ name: "EmployeesIndex" });
                });
        },
        format_date(value) {
            if (value) {
                return moment(String(value)).format("YYYYMMDD");
            }
        }
    }
};
</script>
 
<style></style>

employees projesi vue router #2

web.php içine gelecek tüm istekleri anlamak için;

1
2
3
Route::get('{any}', function () {
    return view('index');
})->where('any', '.*');

bu indexin içine klasik app.blade içeriğinden sonra content içine bir app divi koy. aşağıdaki örnek kod;

1
2
3
4
5
6
7
@extends('layouts.main')
 
@section('content')
    <div id="app">
        <router-view></router-view>
    </div>
@endsection

vue router kurmak için;

1
npm install vue-router

yazıyoruz

app.js dosyamıza gelip üst satıra;

1
2
3
import VueRouter from "vue-router";
import { routes } from "./routes";
Vue.use(VueRouter);

sonra alt satıra ekliyoruz;

1
2
3
4
5
6
7
8
9
const router = new VueRouter({
    mode: "history",
    routes: routes
});
 
const app = new Vue({
    el: "#app",
    router: router
});

app.js ile aynı klasörde routes.js diye bir dosya oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import EmployeesIndex from "./components/employees/Index";
import EmployeesCreate from "./components/employees/Create";
import EmployeesEdit from "./components/employees/Edit";
 
export const routes = [
    {
        path: "/employees",
        name: "EmployeesIndex",
        component: EmployeesIndex
    },
    {
        path: "/employees/create",
        name: "EmployeesCreate",
        component: EmployeesCreate
    },
    {
        path: "/employees/:id",
        name: "EmployeesEdit",
        component: EmployeesEdit
    }
];

bu path içinde yazanlar için components altında o isimlerle componentler oluşturuyoruz. bedavadan oraya yazmadık yani.

link vermek için;

1
<router-link :to="{ name: 'EmployeesCreate' }" class="btn btn-primary mb-2">Create</router-link>

name değeri yukarıda routes dizine atadığımız name olacak.

laravel vue tarih formatlama

npm install vue-moment

ilk önce kuruyoruz

app.js içine;

Vue.use(require(‘vue-moment’));

ekliyoruz. daha sonra component içine gelip

1
2
3
4
5
6
7
methods: {
        format_date(value){
            if (value) {
                return moment(String(value)).format('YYYYMMDD')
            }
        },
    },

kullanacağımız zaman ise şu şekilde;

1
{{ format_date(valuedegiskeniniz) }}

laravel vue #1 kurulum

bir milyonuncu yarım bırakılan laravel xxxxsinin farklı bir versiyonu ile karşınızdayız. bunu bu sefer bitirdim.

ilk önce laraveli kurduktan sonra sırayla aşağıdaki kodları yazınız

  1. run composer require laravel/ui
  2. run php artisan ui vue for just installing Vue.
  3. run php artisan ui vue --auth for scaffolding out the auth views.
  4. run npm install && npm run dev

resources içinde js/components/examplecomponent.vue gözükecektir. işlem tamamdır. hayırlı olsun.

edit2:

her olaydan sonra npm run watch yazıyoruz ama o çalışmaz ise aşağıdaki kodu yazıyoruz.

npm update vue-loader