{"id":3785,"date":"2020-06-15T16:33:57","date_gmt":"2020-06-15T07:33:57","guid":{"rendered":"https:\/\/deha.co.jp\/magazine\/?p=3785"},"modified":"2021-07-20T00:00:21","modified_gmt":"2021-07-19T15:00:21","slug":"admin-laravel-nuxt-crud","status":"publish","type":"post","link":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/","title":{"rendered":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011"},"content":{"rendered":"\n


PHP\u306e\u4eba\u6c17\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30afLaravel<\/a>\u3067\u306fWeb\u30b5\u30a4\u30c8\u306e\u7ba1\u7406\u753b\u9762\u3092\u958b\u767a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u3053\u306e\u30b7\u30ea\u30fc\u30ba\u3067\u306f\u305d\u3093\u306a\u7ba1\u7406\u753b\u9762\u306e\u69cb\u7bc9\u306b\u95a2\u3057\u3066\u3001\u6280\u8853\u8005\u5411\u3051\u306b\u305d\u306e\u624b\u9806\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002
\u3053\u306e\u8a18\u4e8b\u3067\u306fVuetify\u3092\u5229\u7528\u3057\u3066CRUD\u3092\u4f5c\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\uff01

Nuxt.js\u304b\u3089Laravel\u306eAPI\u3092Ajax\u3067\u901a\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u624b\u9806\u306f\u3053\u3061\u3089\u306e\u8a18\u4e8b<\/a>\u3067\u89e3\u8aac\u3002Cookie\u306b\u3088\u308bAPI\u7d4c\u7531\u306e\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u6a5f\u80fd\u3092\u4f5c\u308b\u65b9\u6cd5\u306f\u3053\u3061\u3089\u306e\u8a18\u4e8b<\/a>\u3067\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u30fbLaravel\u3092\u4f7f\u3063\u3066\u69cb\u7bc9\u3092\u3057\u305f\u3044\u65b9
\u30fbWeb\u30b5\u30a4\u30c8\u69cb\u7bc9\u306e\u5177\u4f53\u7684\u306a\u624b\u6cd5\u304c\u77e5\u308a\u305f\u3044\u65b9<\/p>\n\n\n\n

\u3053\u308c\u3089\u306b\u5f53\u3066\u306f\u307e\u308b\u65b9\u306b\u304a\u3059\u3059\u3081\u306e\u8a18\u4e8b\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30b7\u30ea\u30fc\u30ba\u3092\u8aad\u3081\u3070Laravel6\u3068Nuxt.js\u3067\u7ba1\u7406\u753b\u9762\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3088<\/strong>\u3002<\/p>\n\n\n\n\n\n\n\n

Vuetify\u3092\u4f7f\u3046\u7406\u7531<\/h2>\n\n\n\n

Vuetify\u306f\u30de\u30c6\u30ea\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u30d9\u30fc\u30b9\u306eVue\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<\/p>\n\n\n\n

Vue\u3092\u4f7f\u3063\u3066\u753b\u9762\u3092\u4f5c\u308a\u305f\u3044\uff01\u3068\u601d\u3063\u305f\u6642\u306b\u3001\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u3060\u3051\u3067\u3044\u3044\u611f\u3058\u306e\u753b\u9762\u304c\u4f5c\u308c\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u3084\u7ba1\u7406\u753b\u9762\u306a\u3069\u72ec\u81ea\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u4f5c\u308b\u7a0b\u3067\u306f\u306a\u3044\u304c\u3001
\u3044\u3044\u611f\u3058\u306eUI\u306b\u306f\u3057\u305f\u3044\u5834\u5408\u3001Vuetify\u306e\u3088\u3046\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u4fbf\u5229\u3067\u3059\u3002<\/strong><\/p>\n\n\n\n

\u307e\u305fVuetify\u306b\u306f\u7ba1\u7406\u753b\u9762\u306eCRUD\u6a5f\u80fd\u3092\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u697d\u306b\u4eca\u56de\u306e\u8981\u4ef6\u3092\u6e80\u305f\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067\u3082\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308b\u901a\u308a\u3001Nuxt.js\u306f\u4ed6\u306b\u3082\u69d8\u3005\u306aUI\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u306e\u3067\u305c\u3072\u4e00\u5ea6\u76ee\u3092\u901a\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n

\u6700\u4f4e\u9650\u3084\u308a\u305f\u3044\u3053\u3068\u3092\u6c7a\u3081\u308b<\/h2>\n\n\n\n

\u4eca\u56de\u3082\u5b9f\u88c5\u306e\u524d\u306b\u3001\u6700\u4f4e\u9650\u3084\u308a\u305f\u3044\u3053\u3068\u3092\u6c7a\u3081\u3066\u304a\u304d\u307e\u3059\u3002

Vuetify\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f\u691c\u7d22\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u3001\u30bd\u30fc\u30c8\u6a5f\u80fd\u3082\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001CRUD\u6a5f\u80fd\u4ee5\u5916\u306b\u3082\u8981\u4ef6\u306b\u8ffd\u52a0\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30fb \u7ba1\u7406\u8005\u306e\u4e00\u89a7\u8868\u793a\u3001\u8ffd\u52a0\u3001\u7de8\u96c6\u3001\u524a\u9664\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\n\u30fb \u7ba1\u7406\u8005\u306e\u4e00\u89a7\u753b\u9762\u3067\u691c\u7d22\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u3001\u30bd\u30fc\u30c8\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/pre>\n\n\n\n
\u6700\u7d42\u7684\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u308b\u4e88\u5b9a\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Laravel\uff08API\uff09\u5074\u306e\u5b9f\u88c5<\/h2>\n\n\n\n
CRUD\u6a5f\u80fd\u306e\u898b\u305f\u76ee\u3060\u3051\u3067\u3042\u308c\u3070Nuxt\u5074\u3060\u3051\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\u304c\u3001
\u672c\u904b\u7528\u3067\u306f\u5f53\u7136\u30c7\u30fc\u30bf\u306e\u6c38\u7d9a\u5316\u304c\u5fc5\u8981\u3067\u3059\u306e\u3067\u3001Laravel<\/a>\u306eAPI\u3082\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u8a8d\u8a3c\u6e08\u306e\u7ba1\u7406\u8005\u306e\u307fAPI\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/h3>\n\n\n\n
\u307e\u305aCRUD\u6a5f\u80fd\u7528\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u8ffd\u52a0\u3059\u308b\u524d\u306b\u3001routes\/api.php<\/code> \u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Route::group([\"middleware\" => \"api\"], function () {\n    Route::post('\/login', 'Auth\\LoginController@login');\n    Route::get('\/current_admin_user', function () {\n        return Auth::user();\n    });\n    \/\/\u8ffd\u52a0\n    Route::group(['middleware' => ['auth:api']], function () {\n        \/\/\u3053\u3053\u306b\u8a8d\u8a3c\u304c\u5fc5\u8981\u306a\u30d1\u30b9\u3092\u66f8\u3044\u3066\u3044\u304f\n    });\n});<\/pre>\n\n\n\n
\u524d\u56de\u306e\u8a18\u4e8b\u3067auth:api<\/code>\u306fCookie\u3067\u7ba1\u7406\u8005\u306e\u8a8d\u8a3c\u3092\u884c\u3046\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001
\u3053\u308c\u3067\u8a8d\u8a3c\u6e08\u306e\u7ba1\u7406\u8005\u306e\u307fAPI\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u7ba1\u7406\u8005\u306eCRUD\u6a5f\u80fd\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210<\/h3>\n\n\n\n
\u6b21\u306b\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u7ba1\u7406\u8005\u306eCRUD\u6a5f\u80fd\u7528\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
php artisan make:controller Api\/AdminUserController --resource --api<\/code><\/pre>\n\n\n\n
--api<\/code>\u3092\u3064\u3051\u308b\u3053\u3068\u3067API\u3068\u3057\u3066\u306f\u4e0d\u8981\u306a\u65b0\u898f\u4f5c\u6210\u753b\u9762(create<\/code>)\u3068\u7de8\u96c6\u753b\u9762(edit<\/code>)\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u7701\u7565\u3057\u305f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u7ba1\u7406\u8005\u306eCRUD\u6a5f\u80fd\u7528\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f5c\u6210<\/h3>\n\n\n\n
\u6b21\u306broutes\/api.php<\/code> \u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
Route::group([\"middleware\" => \"api\"], function () {\n    Route::post('\/login', 'Auth\\LoginController@login');\n    Route::get('\/current_admin_user', function () {\n        return Auth::user();\n    });\n    Route::group(['middleware' => ['auth:api']], function () {\n        \/\/\u8ffd\u52a0\n        Route::apiResource('admin_users', 'Api\\AdminUserController')->except(['show']);\n    });\n});<\/code><\/pre>\n\n\n\n
Route::apiResource<\/code>\u3092\u4f7f\u3046\u3053\u3068\u3067CRUD\u6a5f\u80fd\u7528\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002
\u4eca\u56de\u306f\u8a73\u7d30\u8868\u793a\u306f\u4e0d\u8981\u306a\u306e\u3067show<\/code>\u306f\u9664\u5916\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
php artisan route:list<\/code><\/pre>\n\n\n\n
\u4e0a\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u7d50\u679c\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u7ba1\u7406\u8005\u306eCRUD\u6a5f\u80fd\u3092\u5b9f\u88c5<\/h3>\n\n\n\n
\u6b21\u306bapp\/Http\/Controllers\/Api\/AdminUserController.php<\/code>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers\\Api;\n\nuse App\\Http\\Controllers\\Controller;\nuse Illuminate\\Http\\Request;\n\/\/\u8ffd\u52a0\nuse Illuminate\\Support\\Facades\\Hash;\nuse App\\AdminUser;\n\nclass AdminUserController extends Controller\n{\n    \/**\n     * Display a listing of the resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function index()\n    {\n        \/\/\u8ffd\u52a0\n        return AdminUser::all();\n    }\n\n    \/**\n     * Store a newly created resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function store(Request $request)\n    {\n        \/\/\u8ffd\u52a0\n        $admin_user = new AdminUser;\n        $admin_user->fill(array_merge(\n            $request->all(), ['password' => Hash::make($request->password)]\n        ))->save();\n        return $admin_user;\n    }\n\n    \/**\n     * Update the specified resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @param  int  $id\n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function update(Request $request, $id)\n    {\n        \/\/\u8ffd\u52a0\n        $admin_user = AdminUser::find($id);\n        $admin_user->fill(array_merge(\n            $request->all(), ['password' => Hash::make($request->password)]\n        ))->save();\n        return $admin_user;\n    }\n\n    \/**\n     * Remove the specified resource from storage.\n     *\n     * @param  int  $id\n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function destroy($id)\n    {\n        \/\/\u8ffd\u52a0\n        $admin_user = AdminUser::find($id);\n        $admin_user->delete();\n        return $admin_user;\n    }\n}<\/pre>\n\n\n\n
\u65b0\u898f\u4f5c\u6210\u3068\u66f4\u65b0\u6642\u306b\u306ffill<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3046\u3053\u3068\u3067\u3001
app\/AdminUser.php<\/code>\u306e$fillable<\/code>\u3067\u8a31\u53ef\u3055\u308c\u3066\u3044\u308b\u30ab\u30e9\u30e0\u306e\u307f\u4fdd\u5b58\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
Nuxt.js\u5074\u306e\u5b9f\u88c5<\/h2>\n\n\n\n
\u6b21\u306b\u5b9f\u88c5\u3057\u305fAPI\u3092\u4f7f\u3063\u3066Nuxt.js\u5074\u3067CRUD\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
Vuetify\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h3>\n\n\n\n
\u307e\u305a\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3067Vuetify<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
yarn add @nuxtjs\/vuetify -D<\/code><\/p>\n\n\n\n
\u6b21\u306bnuxt.config.js<\/code>\u306ebuildModules<\/code>\u306e\u9805\u76ee\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\/*\n** Nuxt.js dev-modules\n*\/\nbuildModules: [\n  \/\/\u8ffd\u52a0\n  '@nuxtjs\/vuetify',\n],<\/code><\/pre>\n\n\n\n
\u3053\u308c\u3067Vuetify<\/code>\u3092\u5229\u7528\u3059\u308b\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0<\/h3>\n\n\n\n
\u6b21\u306bVuetify<\/code>\u3092\u4f7f\u3063\u3066\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6574\u3048\u3066\u3044\u304d\u307e\u3059\u3002
\u307e\u305a\u5c02\u7528\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u5185\u5bb9\u306elayouts\/admin_login.vue<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-app>\n    <!-- \u30d8\u30c3\u30c0\u30fc\u90e8\u5206 -->\n    <v-app-bar\n      :clipped-left=\"clipped\"\n      fixed\n      app\n    >\n      <v-toolbar-title v-text=\"title\" \/>\n    <\/v-app-bar>\n    <!-- \u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206 -->\n    <v-content>\n      <v-container>\n        <nuxt \/>\n      <\/v-container>\n    <\/v-content>\n    <!-- \u30d5\u30c3\u30bf\u30fc\u90e8\u5206 -->\n    <v-footer\n      :fixed=\"fixed\"\n      app\n    >\n      <span>&copy; {{ new Date().getFullYear() }}<\/span>\n    <\/v-footer>\n  <\/v-app>\n<\/template>\n\n<script>\nexport default {\n  data () {\n    return {\n      clipped: false,\n      fixed: false,\n      title: 'Laravel Nuxt Admin'\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n\n\n\n
\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u304c\u8ffd\u52a0\u3067\u304d\u305f\u3089\u3001pages\/admin\/login.vue<\/code>\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306blayout<\/code>\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<script>\nexport default {\n  middleware: 'logined_admin_user',\n  \/\/\u8ffd\u52a0\n  layout: 'admin_login',\n  data () {\n    return {\n      email: '',\n      password: ''\n    }\n  },\n  methods: {\n    async submit () {\n      await this.$store.dispatch('auth\/login', {\n        email: this.email,\n        password: this.password\n      })\n      this.$router.push('\/admin')\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
http:\/\/localhost:3000\/admin\/login<\/a> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30ed\u30b0\u30a4\u30f3\u30d5\u30a9\u30fc\u30e0\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u53cd\u6620<\/h3>\n\n\n\n
\u6b21\u306bpages\/admin\/login.vue<\/code>\u306e\u30d5\u30a9\u30fc\u30e0\u90e8\u5206\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <section>\n    <h1 class=\"display-1 mt-5\">\u7ba1\u7406\u8005\u30ed\u30b0\u30a4\u30f3<\/h1>\n    <v-form @submit.prevent=\"submit\">\n      <v-text-field label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" v-model=\"email\" \/>\n      <v-text-field type=\"password\" label=\"\u30d1\u30b9\u30ef\u30fc\u30c9\" v-model=\"password\" \/>\n      <v-btn type=\"submit\" class=\"info\">\u30ed\u30b0\u30a4\u30f3<\/v-btn>\n    <\/v-form>\n  <\/section>\n<\/template><\/pre>\n\n\n\n
http:\/\/localhost:3000\/admin\/login<\/a> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u30c6\u30ad\u30b9\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u59cb\u3081\u3001Vuetify<\/code>\u3067\u4f7f\u3048\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u8208\u5473\u306e\u3042\u308b\u65b9\u306f\u305c\u3072\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u753b\u9762\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0<\/h3>\n\n\n\n
\u6b21\u306b\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u753b\u9762\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6574\u3048\u3066\u3044\u304d\u307e\u3059\u3002
\u5c02\u7528\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u4ee5\u4e0b\u306e\u5185\u5bb9\u306elayouts\/admin.vue<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-app>\n    <!-- \u30b5\u30a4\u30c9\u30d0\u30fc\u90e8\u5206  -->\n    <v-navigation-drawer\n      v-model=\"drawer\"\n      :mini-variant=\"miniVariant\"\n      :clipped=\"clipped\"\n      fixed\n      app\n    >\n      <v-list>\n        <v-list-item\n          v-for=\"(item, i) in items\"\n          :key=\"i\"\n          :to=\"item.to\"\n          router\n          exact\n        >\n          <v-list-item-action>\n            <v-icon>{{ item.icon }}<\/v-icon>\n          <\/v-list-item-action>\n          <v-list-item-content>\n            <v-list-item-title v-text=\"item.title\" \/>\n          <\/v-list-item-content>\n        <\/v-list-item>\n      <\/v-list>\n    <\/v-navigation-drawer>\n    <!-- \u30d8\u30c3\u30c0\u30fc\u90e8\u5206 -->\n    <v-app-bar\n      :clipped-left=\"clipped\"\n      fixed\n      app\n    >\n      <v-app-bar-nav-icon @click.stop=\"drawer = !drawer\" \/>\n      <v-toolbar-title v-text=\"title\" \/>\n      <v-spacer \/>\n    <\/v-app-bar>\n    <!-- \u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206 -->\n    <v-content>\n      <v-container fluid pa-10>\n        <nuxt \/>\n      <\/v-container>\n    <\/v-content>\n    <!-- \u30d5\u30c3\u30bf\u30fc\u90e8\u5206 -->\n    <v-footer\n      :fixed=\"fixed\"\n      app\n    >\n      <span>\u00a9 {{ new Date().getFullYear() }}<\/span>\n    <\/v-footer>\n  <\/v-app>\n<\/template>\n\n<script>\nexport default {\n  data () {\n    return {\n      clipped: false,\n      drawer: true,\n      fixed: false,\n      items: [\n        {\n          icon: 'mdi-account',\n          title: '\u7ba1\u7406\u8005\u4e00\u89a7',\n          to: '\/admin'\n        },\n      ],\n      miniVariant: false,\n      title: 'Laravel Nuxt Admin'\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u3068\u540c\u69d8\u306bpages\/admin\/index.vue<\/code>\u306blayout\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <section>\n    <h1>\u7ba1\u7406\u753b\u9762\u3078\u3088\u3046\u3053\u305d<\/h1>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  \/\/\u8ffd\u52a0\n  layout: 'admin',\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u30ed\u30b0\u30a4\u30f3\u3057\u305f\u72b6\u614b\u3067 http:\/\/localhost:3000\/admin<\/a> \u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u306b\u306a\u3063\u3066\u3044\u308c\u3070OK\u3067\u3059\u3002
\u3061\u3083\u3093\u3068\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u5bfe\u5fdc\u3055\u308c\u3066\u3044\u308b\u304b\u3082\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3053\u308c\u3067\u4ee5\u524d\u306b\u6bd4\u3079\u308c\u3070\u3001\u5927\u5206\u3044\u3044\u611f\u3058\u306eUI\u306b\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u3002
\u3061\u306a\u307f\u306b\u30a2\u30a4\u30b3\u30f3\u306b\u95a2\u3057\u3066\u306fMaterial Design Icons<\/a>\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002\u305c\u3072\u4e00\u5ea6\u76ee\u3092\u901a\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
Vuetify<\/code>\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306f\u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u306fcontainer<\/code>\u30af\u30e9\u30b9\u3067\u56f2\u307e\u308c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001
\u3053\u308c\u3060\u3068\u4f59\u767d\u304c\u5e83\u3059\u304e\u305f\u306e\u3067fluid<\/code>\u30aa\u30d7\u30b7\u30e7\u30f3\u3067\u6a2a\u5e45\u4e00\u676f\u306b\u5e83\u3052pa-10<\/code>\u30af\u30e9\u30b9\u3067\u4e01\u5ea6\u3044\u3044\u4f59\u767d\u306b\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u7ba1\u7406\u8005\u4e00\u89a7\u306e\u5b9f\u88c5<\/h3>\n\n\n\n
\u6b21\u306b\u3044\u3088\u3044\u3088CRUD\u6a5f\u80fd\u306e\u5b9f\u88c5\u306b\u5165\u3063\u3066\u3044\u304d\u307e\u3059\u3002
\u307e\u305a\u306f\u7ba1\u7406\u8005\u306e\u4e00\u89a7\u8868\u793a\u3092\u4f5c\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\u7ba1\u7406\u8005\u4e00\u89a7\u7528\u306eStore\u3092\u8ffd\u52a0<\/h4>\n\n\n\n
JS\u3067\u52d5\u7684\u306b\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u3001API\u3067\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092Store\u3067\u7ba1\u7406\u3057\u307e\u3059\u3002
\u4ee5\u4e0b\u306e\u5185\u5bb9\u306estore\/adminUsers.js<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
export const state = () => ({\n  adminUsers: []\n})\n\nexport const getters = {\n  list (state) {\n    return state.adminUsers\n  }\n}\n\nexport const mutations = {\n  setList (state, data) {\n    state.adminUsers = data\n  }\n}\n\nexport const actions = {\n  async fetchList () {\n    return await this.$axios.$get('\/admin_users')\n      .catch(err => {\n        console.log(err)\n      })\n  }\n}<\/code><\/pre>\n\n\n\n
\u57fa\u672c\u65b9\u91dd\u3068\u3057\u3066\u3001\u975e\u540c\u671f\u51e6\u7406\u306f\u5168\u3066Store\u306eactions<\/code>\u306b\u8a18\u8ff0\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002
View<\/code>\u2192Dispatch<\/code>\u2192Action<\/code>\u2192API\u5b9f\u884c<\/code>\u2192Commit<\/code>\u2192View<\/code>\u306e\u3088\u3046\u306a\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u4e00\u89a7\u30c6\u30fc\u30d6\u30eb\u306e\u8ffd\u52a0<\/h4>\n\n\n\n
\u6b21\u306b\u5148\u306b\u4f5c\u6210\u3057\u305fStore\u3092\u5229\u7528\u3057\u3066\u7ba1\u7406\u8005\u306e\u4e00\u89a7\u3092\u30c6\u30fc\u30d6\u30eb\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u3001
pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
fetch<\/code>\u30e1\u30bd\u30c3\u30c9\u306fNuxt\u306e\u6a5f\u80fd\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3059\u308b\u524d\u306b\u975e\u540c\u671f\u51e6\u7406\u3067\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3067\u521d\u671f\u5316\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002

\u4f3c\u305f\u6a5f\u80fd\u3067asyncData<\/code>\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u975e\u540c\u671f\u51e6\u7406\u3067\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092Store\u306b\u30bb\u30c3\u30c8\u3057\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u305f\u3044\u5834\u5408\u306f\u3001fetch<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
fetch<\/code>\u3067\u521d\u671f\u5316\u3057\u305f\u914d\u5217\u30c7\u30fc\u30bf\u3092Store\u304b\u3089\u53d6\u5f97\u3057\u3001v-data-table<\/code>\u306eitems props<\/code>\u306b\u6e21\u3059\u3060\u3051\u3067\u52d5\u7684\u306b\u30c6\u30fc\u30d6\u30eb\u304c\u4f5c\u3089\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u3053\u308c\u3067\u4e00\u89a7\u8868\u793a\u3001\u691c\u7d22\u3001\u30da\u30fc\u30b8\u30f3\u30b0\u3001\u30bd\u30fc\u30c8\u6a5f\u80fd\u307e\u3067\u4e00\u6c17\u306b\u5b9f\u88c5\u304c\u51fa\u6765\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002
\u4e00\u5ea6\u89e6\u3063\u3066\u307f\u3066\u6a5f\u80fd\u304c\u52d5\u3044\u3066\u3044\u308b\u304b\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\u7de8\u96c6\u6a5f\u80fd\u306e\u5b9f\u88c5<\/h3>\n\n\n\n
\u6b21\u306b\u4e00\u89a7\u306e\u30c7\u30fc\u30bf\u306e\u7de8\u96c6\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
Store\u306b\u7de8\u96c6\u7528\u306eaction\u3068mutation\u3092\u8ffd\u52a0<\/h4>\n\n\n\n
\u307e\u305astore\/adminUsers.js<\/code>\u306b\u4ee5\u4e0b\u306e\u5185\u5bb9\u306eaction<\/code>\u3068mutation<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
export const mutations = {\n  setList (state, data) {\n    state.adminUsers = data\n  },\n  \/\/\u8ffd\u52a0\n  update (state, data) {\n    state.adminUsers.forEach((adminUser, index) => {\n      if (adminUser.id === data.id) {\n        state.adminUsers.splice(index, 1, data)\n      }\n    })\n  }\n}\n\nexport const actions = {\n  async fetchList () {\n    return await this.$axios.$get('\/admin_users')\n      .catch(err => {\n        console.log(err)\n      })\n  },\n  \/\/\u8ffd\u52a0\n  async update ({ commit }, adminUser) {\n    const response = await this.$axios.$patch(`\/admin_users\/${adminUser.id}`, adminUser)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('update', response)\n  }\n}<\/code><\/pre>\n\n\n\n
\u30d3\u30e5\u30fc\u3067update<\/code>\u30a2\u30af\u30b7\u30e7\u30f3\u304cDispatch<\/code>\u3055\u308c\u305f\u3089\u3001
Laravel\u306eAPI\u3092\u5b9f\u884c\u3057\u66f4\u65b0\u3057\u305f\u5024\u3092Store<\/code>\u306b\u3082\u53cd\u6620\u3057\u3066\u518d\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u51e6\u7406\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u4e00\u89a7\u30c6\u30fc\u30d6\u30eb\u306b\u7de8\u96c6\u7528\u30a2\u30a4\u30b3\u30f3\u3092\u8868\u793a<\/h4>\n\n\n\n
\u6b21\u306b\u7de8\u96c6\u306e\u30c8\u30ea\u30ac\u30fc\u3068\u306a\u308b\u30a2\u30a4\u30b3\u30f3\u3092\u4e00\u89a7\u30c6\u30fc\u30d6\u30eb\u306b\u8868\u793a\u3057\u307e\u3059\u3002pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n        <!-- \u8ffd\u52a0 -->\n        <template v-slot:item.edit-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickEditIcon(item)\"\n          >\n            mdi-pencil\n          <\/v-icon>\n        <\/template>\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      \/\/\u8ffd\u52a0\n      dialogAdminUser: {},\n      \/\/\u8ffd\u52a0\n      isShowDialog: false,\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    }\n  },\n  \/\/\u8ffd\u52a0\n  methods: {\n    onClickEditIcon (adminUser) {\n      this.dialogAdminUser = Object.assign({}, adminUser)\n      this.isShowDialog = true\n    },\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u3053\u308c\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u7528\u306e\u30a2\u30a4\u30b3\u30f3\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u3053\u3053\u3067\u91cd\u8981\u306a\u306e\u304c\u3001v-slot<\/code>\u3068\u3044\u3046\u8a18\u8ff0\u3067\u3059\u3002
\u307e\u305aVue.js\u306b\u306f\u30b9\u30ed\u30c3\u30c8\u3068\u3044\u3046\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u5074\u304c\u30b3\u30f3\u30c6\u30f3\u30c4\u30c7\u30fc\u30bf\u3092\u6e21\u305b\u308b\u4ed5\u7d44\u307f\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u30b9\u30ed\u30c3\u30c8\u306b\u3088\u308b\u30b3\u30f3\u30c6\u30f3\u30c4\u914d\u4fe1  |  Vue.js\u30ac\u30a4\u30c9<\/a><\/p>\n\n\n\n
\u305d\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u8907\u6570\u306e\u30b9\u30ed\u30c3\u30c8\u3092\u6e21\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u540d\u524d\u4ed8\u304d\u30b9\u30ed\u30c3\u30c8\u3092\u4f7f\u3044\u307e\u3059\u3002

\u540d\u524d\u4ed8\u304d\u30b9\u30ed\u30c3\u30c8  |  Vue.js\u30ac\u30a4\u30c9<\/a><\/p>\n\n\n\n
\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3001
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u5074\u304cv-slot:xxx<\/code>\u3067\u540d\u524d\u3092\u3064\u3051\u305f\u30b9\u30ed\u30c3\u30c8\u306b\u8907\u6570\u306e\u5024\u3092\u6e21\u305b\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
# base-layout\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u8eab\n<div>\n <header>\n   <slot name=\"header\"><\/slot>\n <\/header>\n <footer>\n   <slot name=\"footer\"><\/slot>\n <\/footer>\n<\/div>\n\n# base-layout\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u3046\u5074\n<base-layout>\n  <template v-slot:header>\n    <h1>Here might be a page title<\/h1>\n  <\/template>\n\n  <template v-slot:footer>\n    <p>Here's some contact info<\/p>\n  <\/template>\n<\/base-layout><\/code><\/pre>\n\n\n\n
v-data-table<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3053\u306e\u540d\u524d\u4ed8\u304d\u30b9\u30ed\u30c3\u30c8\u306e\u4ed5\u7d44\u307f\u3092\u5229\u7528\u3057\u3066\u304a\u308a\u3001
headers<\/code>\u3067\u6307\u5b9a\u3057\u305f\u540d\u524d\u306e\u30b9\u30ed\u30c3\u30c8\u304ctd<\/code>\u30bf\u30b0\u306e\u5b50\u8981\u7d20\u3068\u3057\u3066\u51fa\u529b\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059 (\u30b3\u30fc\u30c9\u306f\u3053\u3061\u3089<\/a>)<\/p>\n\n\n\n
<template v-slot:item.edit-action=\"{ item }\">\n  <v-icon\n    small\n    @click=\"onClickEditIcon(item)\"\n  >\n    mdi-pencil\n  <\/v-icon>\n<\/template><\/code><\/pre>\n\n\n\n
\u305d\u306e\u305f\u3081\u4e0a\u8a18\u306e\u3088\u3046\u306b\u66f8\u304f\u3053\u3068\u3067\u7de8\u96c6\u30a2\u30a4\u30b3\u30f3\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u7de8\u96c6\u30e2\u30fc\u30c0\u30eb\u306e\u8ffd\u52a0<\/h4>\n\n\n\n
\u6b21\u306b\u7de8\u96c6\u7528\u306e\u30e2\u30fc\u30c0\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002
pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n        <!-- \u8ffd\u52a0 -->\n        <template v-slot:top>\n          <v-dialog v-model=\"isShowDialog\" max-width=\"500px\">\n            <v-card>\n              <v-card-title>\n                <span class=\"headline\">\u7ba1\u7406\u8005\u7de8\u96c6<\/span>\n              <\/v-card-title>\n              <v-card-text>\n                <v-container>\n                  <v-row>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.email\" label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" \/>\n                    <\/v-col>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.name\" label=\"\u540d\u524d\" \/>\n                    <\/v-col>\n                    <v-col cols=\"12\">\n                      <v-text-field type=\"password\" v-model=\"dialogAdminUser.password\" label=\"\u30d1\u30b9\u30ef\u30fc\u30c9\" \/>\n                    <\/v-col>\n                  <\/v-row>\n                <\/v-container>\n              <\/v-card-text>\n              <v-card-actions>\n                <v-spacer \/>\n                <v-btn @click=\"closeDialog\">\u9589\u3058\u308b<\/v-btn>\n                <v-btn class=\"primary\" @click=\"onClickUpdateBtn\">\u66f4\u65b0\u3059\u308b<\/v-btn>\n                <v-spacer \/>\n              <\/v-card-actions>\n            <\/v-card>\n          <\/v-dialog>\n        <\/template>\n        <template v-slot:item.edit-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickEditIcon(item)\"\n          >\n            mdi-pencil\n          <\/v-icon>\n        <\/template>\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      dialogAdminUser: {},\n      isShowDialog: false,\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    }\n  },\n  methods: {\n    \/\/\u8ffd\u52a0\n    closeDialog () {\n      this.dialogAdminUser = {}\n      this.isShowDialog = false\n    },\n    onClickEditIcon (adminUser) {\n      this.dialogAdminUser = Object.assign({}, adminUser)\n      this.isShowDialog = true\n    },\n    \/\/\u8ffd\u52a0\n    async onClickUpdateBtn () {\n      await this.$store.dispatch('adminUsers\/update', this.dialogAdminUser)\n      this.closeDialog()\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
v-slot:top<\/code>\u3067\u30c6\u30fc\u30d6\u30eb\u306e\u4e0a\u306b\u30e2\u30fc\u30c0\u30eb\u7528\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u30b9\u30ed\u30c3\u30c8\u3068\u3057\u3066\u51fa\u529b\u3055\u308c\u3001isShowDialog<\/code>\u304ctrue\u306b\u306a\u3063\u305f\u6642\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
v-data-table<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u5229\u7528\u3067\u304d\u308b\u30b9\u30ed\u30c3\u30c8\u306e\u7a2e\u985e\u306f\u3053\u3061\u3089<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u3053\u308c\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306a\u30e2\u30fc\u30c0\u30eb\u3067\u5185\u5bb9\u3092\u7de8\u96c6\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u524a\u9664\u6a5f\u80fd\u306e\u5b9f\u88c5<\/h3>\n\n\n\n
\u6b21\u306b\u524a\u9664\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
Store\u306b\u524a\u9664\u7528\u306eaction\u3068mutation\u3092\u8ffd\u52a0<\/h4>\n\n\n\n
\u307e\u305astore\/adminUsers.js<\/code>\u306b\u4ee5\u4e0b\u306e\u5185\u5bb9\u306eaction<\/code>\u3068mutation<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
export const state = () => ({\n  adminUsers: []\n})\n\nexport const getters = {\n  list (state) {\n    return state.adminUsers\n  }\n}\n\nexport const mutations = {\n  setList (state, data) {\n    state.adminUsers = data\n  },\n  \/\/\u8ffd\u52a0\n  delete (state, data) {\n    state.adminUsers.forEach((adminUser, index) => {\n      if (adminUser.id === data.id) {\n        state.adminUsers.splice(index, 1)\n      }\n    })\n  },\n  update (state, data) {\n    state.adminUsers.forEach((adminUser, index) => {\n      if (adminUser.id === data.id) {\n        state.adminUsers.splice(index, 1, data)\n      }\n    })\n  }\n}\n\nexport const actions = {\n  async fetchList () {\n    return await this.$axios.$get('\/admin_users')\n      .catch(err => {\n        console.log(err)\n      })\n  },\n  \/\/\u8ffd\u52a0\n  async delete ({ commit }, adminUser) {\n    const response = await this.$axios.$delete(`\/admin_users\/${adminUser.id}`)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('delete', response)\n  },\n  async update ({ commit }, adminUser) {\n    const response = await this.$axios.$patch(`\/admin_users\/${adminUser.id}`, adminUser)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('update', response)\n  }\n}<\/code><\/pre>\n\n\n\n

\u4e00\u89a7\u30c6\u30fc\u30d6\u30eb\u306b\u524a\u9664\u7528\u30a2\u30a4\u30b3\u30f3\u3092\u8868\u793a<\/h4>\n\n\n\n
\u6b21\u306b\u540c\u69d8\u306b\u524a\u9664\u306e\u30c8\u30ea\u30ac\u30fc\u3068\u306a\u308b\u30a2\u30a4\u30b3\u30f3\u3092\u4e00\u89a7\u30c6\u30fc\u30d6\u30eb\u306b\u8868\u793a\u3057\u307e\u3059\u3002
pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n        <template v-slot:top>\n          <v-dialog v-model=\"isShowDialog\" max-width=\"500px\">\n            <v-card>\n              <v-card-title>\n                <span class=\"headline\">\u7ba1\u7406\u8005\u7de8\u96c6<\/span>\n              <\/v-card-title>\n              <v-card-text>\n                <v-container>\n                  <v-row>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.email\" label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" \/>\n                    <\/v-col>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.name\" label=\"\u540d\u524d\" \/>\n                    <\/v-col>\n                    <v-col cols=\"12\">\n                      <v-text-field type=\"password\" v-model=\"dialogAdminUser.password\" label=\"\u30d1\u30b9\u30ef\u30fc\u30c9\" \/>\n                    <\/v-col>\n                  <\/v-row>\n                <\/v-container>\n              <\/v-card-text>\n              <v-card-actions>\n                <v-spacer \/>\n                <v-btn @click=\"closeDialog\">\u9589\u3058\u308b<\/v-btn>\n                <v-btn class=\"primary\" @click=\"onClickUpdateBtn\">\u66f4\u65b0\u3059\u308b<\/v-btn>\n                <v-spacer \/>\n              <\/v-card-actions>\n            <\/v-card>\n          <\/v-dialog>\n        <\/template>\n        <template v-slot:item.edit-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickEditIcon(item)\"\n          >\n            mdi-pencil\n          <\/v-icon>\n        <\/template>\n        <!-- \u8ffd\u52a0 -->\n        <template v-slot:item.delete-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickDeleteIcon(item)\"\n          >\n            mdi-delete\n          <\/v-icon>\n        <\/template>\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      dialogAdminUser: {},\n      isShowDialog: false,\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    }\n  },\n  methods: {\n    closeDialog () {\n      this.dialogAdminUser = {}\n      this.isShowDialog = false\n    },\n    onClickEditIcon (adminUser) {\n      this.dialogAdminUser = Object.assign({}, adminUser)\n      this.isShowDialog = true\n    },\n    \/\/\u8ffd\u52a0\n    async onClickDeleteIcon (adminUser) {\n      await this.$store.dispatch('adminUsers\/delete', adminUser)\n    },\n    async onClickUpdateBtn () {\n      await this.$store.dispatch('adminUsers\/update', this.dialogAdminUser)\n      this.closeDialog()\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
\u3053\u308c\u3067\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u524a\u9664\u30a2\u30a4\u30b3\u30f3\u304c\u8868\u793a\u3055\u308c\u3001\u30c7\u30fc\u30bf\u3092\u524a\u9664\u51fa\u6765\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u65b0\u898f\u8ffd\u52a0\u306e\u5b9f\u88c5<\/h3>\n\n\n\n
\u6700\u5f8c\u306b\u65b0\u898f\u8ffd\u52a0\u306e\u5b9f\u88c5\u3092\u884c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
Store\u306b\u65b0\u898f\u8ffd\u52a0\u7528\u306eaction\u3068mutation\u3092\u8ffd\u52a0<\/h4>\n\n\n\n
export const state = () => ({\n  adminUsers: []\n})\n\nexport const getters = {\n  list (state) {\n    return state.adminUsers\n  }\n}\n\nexport const mutations = {\n  setList (state, data) {\n    state.adminUsers = data\n  },\n  \/\/\u8ffd\u52a0\n  create (state, data) {\n    state.adminUsers.push(data)\n  },\n  delete (state, data) {\n    state.adminUsers.forEach((adminUser, index) => {\n      if (adminUser.id === data.id) {\n        state.adminUsers.splice(index, 1)\n      }\n    })\n  },\n  update (state, data) {\n    state.adminUsers.forEach((adminUser, index) => {\n      if (adminUser.id === data.id) {\n        state.adminUsers.splice(index, 1, data)\n      }\n    })\n  }\n}\n\nexport const actions = {\n  async fetchList () {\n    return await this.$axios.$get('\/admin_users')\n      .catch(err => {\n        console.log(err)\n      })\n  },\n  \/\/\u8ffd\u52a0\n  async create ({ commit }, adminUser) {\n    const response = await this.$axios.$post('\/admin_users', adminUser)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('create', response)\n  },\n  async delete ({ commit }, adminUser) {\n    const response = await this.$axios.$delete(`\/admin_users\/${adminUser.id}`)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('delete', response)\n  },\n  async update ({ commit }, adminUser) {\n    const response = await this.$axios.$patch(`\/admin_users\/${adminUser.id}`, adminUser)\n      .catch(err => {\n        console.log(err)\n      })\n    commit('update', response)\n  }\n}<\/code><\/pre>\n\n\n\n

\u30e2\u30fc\u30c0\u30eb\u3092\u65b0\u898f\u8ffd\u52a0\u30fb\u7de8\u96c6\u4e21\u65b9\u3067\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u4fee\u6b63<\/h4>\n\n\n\n
\u6b21\u306b\u65b0\u898f\u8ffd\u52a0\u3067\u3082\u30e2\u30fc\u30c0\u30eb\u3092\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3001pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n        <template v-slot:top>\n          <v-dialog v-model=\"isShowDialog\" max-width=\"500px\">\n            <v-card>\n              <v-card-title>\n                <!-- \u7de8\u96c6 -->\n                <span class=\"headline\">{{ formTitle }}<\/span>\n              <\/v-card-title>\n              <v-card-text>\n                <v-container>\n                  <v-row>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.email\" label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" \/>\n                    <\/v-col>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.name\" label=\"\u540d\u524d\" \/>\n                    <\/v-col>\n                    <v-col cols=\"12\">\n                      <v-text-field type=\"password\" v-model=\"dialogAdminUser.password\" label=\"\u30d1\u30b9\u30ef\u30fc\u30c9\" \/>\n                    <\/v-col>\n                  <\/v-row>\n                <\/v-container>\n              <\/v-card-text>\n              <v-card-actions>\n                <v-spacer \/>\n                <v-btn @click=\"closeDialog\">\u9589\u3058\u308b<\/v-btn>\n                <!-- \u7de8\u96c6 -->\n                <v-btn v-if=\"isPersistedAdminUser\" class=\"primary\" @click=\"onClickUpdateBtn\">\u66f4\u65b0\u3059\u308b<\/v-btn>\n                <!-- \u8ffd\u52a0 -->\n                <v-btn v-else class=\"primary\" @click=\"onClickCreateBtn\">\u8ffd\u52a0\u3059\u308b<\/v-btn>\n                <v-spacer \/>\n              <\/v-card-actions>\n            <\/v-card>\n          <\/v-dialog>\n        <\/template>\n        <template v-slot:item.edit-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickEditIcon(item)\"\n          >\n            mdi-pencil\n          <\/v-icon>\n        <\/template>\n        <template v-slot:item.delete-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickDeleteIcon(item)\"\n          >\n            mdi-delete\n          <\/v-icon>\n        <\/template>\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      dialogAdminUser: {},\n      isShowDialog: false,\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    \/\/\u8ffd\u52a0\n    formTitle () {\n      return this.isPersistedAdminUser ? '\u7ba1\u7406\u8005\u7de8\u96c6' : '\u7ba1\u7406\u8005\u8ffd\u52a0'\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    },\n    \/\/\u8ffd\u52a0\n    isPersistedAdminUser () {\n      return !!this.dialogAdminUser.id\n    },\n  },\n  methods: {\n    closeDialog () {\n      \/\/\u7de8\u96c6\n      this.isShowDialog = false\n      setTimeout(() => {\n        this.dialogAdminUser = {}\n      }, 1000)\n    },\n    onClickEditIcon (adminUser) {\n      this.dialogAdminUser = Object.assign({}, adminUser)\n      this.isShowDialog = true\n    },\n    \/\/\u8ffd\u52a0\n    async onClickCreateBtn () {\n      await this.$store.dispatch('adminUsers\/create', this.dialogAdminUser)\n      this.closeDialog()\n    },\n    async onClickDeleteIcon (adminUser) {\n      await this.$store.dispatch('adminUsers\/delete', adminUser)\n    },\n    async onClickUpdateBtn () {\n      await this.$store.dispatch('adminUsers\/update', this.dialogAdminUser)\n      this.closeDialog()\n    }\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n

\u65b0\u898f\u8ffd\u52a0\u7528\u306e\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0<\/h4>\n\n\n\n
\u6b21\u306b\u65b0\u898f\u8ffd\u52a0\u3067\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002pages\/admin\/index.vue<\/code>\u3092\u4ee5\u4e0b\u306e\u5185\u5bb9\u3067\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
<template>\n  <v-layout\n    column\n    justify-center\n  >\n    <v-card v-if=\"adminUsers\">\n      <v-card-title>\n        \u7ba1\u7406\u8005\u4e00\u89a7\n        <v-spacer \/>\n        <v-text-field\n          v-model=\"searchText\"\n          append-icon=\"mdi-magnify\"\n          label=\"\u691c\u7d22\"\n          sigle-line\n        \/>\n      <\/v-card-title>\n      <v-data-table\n        :headers=\"headers\"\n        :items=\"adminUsers\"\n        :items-per-page=\"5\"\n        :search=\"searchText\"\n        sort-by=\"id\"\n        :sort-desc=\"true\"\n        class=\"elevation-1\"\n      >\n        <template v-slot:top>\n          <v-dialog v-model=\"isShowDialog\" max-width=\"500px\">\n            <!-- \u8ffd\u52a0 -->\n            <template v-slot:activator>\n              <v-btn fab dark color=\"pink\" class=\"mb-2\"\n                @click=\"onClickAddBtn\"\n              >\n                <v-icon dark>\n                  mdi-plus\n                <\/v-icon>\n              <\/v-btn>\n            <\/template>\n            <v-card>\n              <v-card-title>\n                <span class=\"headline\">{{ formTitle }}<\/span>\n              <\/v-card-title>\n              <v-card-text>\n                <v-container>\n                  <v-row>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.email\" label=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\" \/>\n                    <\/v-col>\n                    <v-col cols=\"6\">\n                      <v-text-field v-model=\"dialogAdminUser.name\" label=\"\u540d\u524d\" \/>\n                    <\/v-col>\n                    <v-col cols=\"12\">\n                      <v-text-field type=\"password\" v-model=\"dialogAdminUser.password\" label=\"\u30d1\u30b9\u30ef\u30fc\u30c9\" \/>\n                    <\/v-col>\n                  <\/v-row>\n                <\/v-container>\n              <\/v-card-text>\n              <v-card-actions>\n                <v-spacer \/>\n                <v-btn @click=\"closeDialog\">\u9589\u3058\u308b<\/v-btn>\n                <v-btn v-if=\"isPersistedAdminUser\" class=\"primary\" @click=\"onClickUpdateBtn\">\u66f4\u65b0\u3059\u308b<\/v-btn>\n                <v-btn v-else class=\"primary\" @click=\"onClickCreateBtn\">\u8ffd\u52a0\u3059\u308b<\/v-btn>\n                <v-spacer \/>\n              <\/v-card-actions>\n            <\/v-card>\n          <\/v-dialog>\n        <\/template>\n        <template v-slot:item.edit-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickEditIcon(item)\"\n          >\n            mdi-pencil\n          <\/v-icon>\n        <\/template>\n        <template v-slot:item.delete-action=\"{ item }\">\n          <v-icon\n            small\n            @click=\"onClickDeleteIcon(item)\"\n          >\n            mdi-delete\n          <\/v-icon>\n        <\/template>\n      <\/v-data-table>\n    <\/v-card>\n  <\/v-layout>\n<\/template>\n\n<script>\nexport default {\n  middleware: 'not_logined_admin_user',\n  layout: 'admin',\n  async fetch ({ store }) {\n    const adminUsers = await store.dispatch('adminUsers\/fetchList')\n    store.commit('adminUsers\/setList', adminUsers)\n  },\n  data () {\n    return {\n      dialogAdminUser: {},\n      isShowDialog: false,\n      searchText: '',\n    }\n  },\n  computed: {\n    adminUsers () {\n      return this.$store.getters['adminUsers\/list']\n    },\n    formTitle () {\n      return this.isPersistedAdminUser ? '\u7ba1\u7406\u8005\u7de8\u96c6' : '\u7ba1\u7406\u8005\u8ffd\u52a0'\n    },\n    headers () {\n     return [\n        { text: 'ID', value: 'id' },\n        { text: '\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9', value: 'email' },\n        { text: '\u540d\u524d', value: 'name' },\n        { text: '', value: 'edit-action' },\n        { text: '', value: 'delete-action' },\n      ]\n    },\n    isPersistedAdminUser () {\n      return !!this.dialogAdminUser.id\n    },\n  },\n  methods: {\n    closeDialog () {\n      this.isShowDialog = false\n      setTimeout(() => {\n        this.dialogAdminUser = {}\n      }, 1000)\n    },\n    \/\/\u8ffd\u52a0\n    onClickAddBtn () {\n      this.dialogAdminUser = {}\n      this.isShowDialog = true\n    },\n    onClickEditIcon (adminUser) {\n      this.dialogAdminUser = Object.assign({}, adminUser)\n      this.isShowDialog = true\n    },\n    async onClickCreateBtn () {\n      await this.$store.dispatch('adminUsers\/create', this.dialogAdminUser)\n      this.closeDialog()\n    },\n    async onClickDeleteIcon (adminUser) {\n      await this.$store.dispatch('adminUsers\/delete', adminUser)\n    },\n    async onClickUpdateBtn () {\n      await this.$store.dispatch('adminUsers\/update', this.dialogAdminUser)\n      this.closeDialog()\n    }\n  }\n}\n<\/script>\n<\/code><\/pre>\n\n\n\n
v-dialog<\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306ev-slot:activator<\/code>\u30b9\u30ed\u30c3\u30c8\u3068\u3057\u3066\u3001
\u30d5\u30ed\u30fc\u30c6\u30a3\u30f3\u30b0\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308c\u3070OK\u3067\u3059\u3002\u65b0\u898f\u8ffd\u52a0\u304c\u6b63\u5e38\u306b\u52d5\u304f\u304b\u3082\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u304a\u308f\u308a\u306b<\/h2>\n\n\n\n
\u4eca\u56de\u306fLaravel\uff08API\uff09\u3068Vuetify\u3092\u7d44\u307f\u5408\u308f\u305b\u3066CRUD\u6a5f\u80fd\u306e\u5b9f\u88c5\u3092\u884c\u3044\u307e\u3057\u305f\u3002
UI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u7d44\u307f\u5408\u308f\u305b\u308c\u3070\u3001\u67d4\u8edf\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n
\u3053\u308c\u3067Laravel\uff08API\uff09\u3068Nuxt.js\u3067\u7ba1\u7406\u753b\u9762\u3092\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\u3002
1\u30641\u3064\u306e\u624b\u9806\u3092\u898b\u76f4\u3057\u3066\u5b9f\u88c5\u3092\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
\n\n\n\n
\u672c\u65e5\u7d39\u4ecb\u3057\u305f\u3088\u3046\u306a\u30c7\u30b6\u30a4\u30f3\u3092\u5916\u6ce8\u3057\u3066\u307f\u308b\u306e\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002 deha\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u30ba\u3067\u306f\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a<\/a>\u306b\u3088\u3063\u3066\u4f4e\u30b3\u30b9\u30c8\u3067\u8fc5\u901f\u306a\u958b\u767a\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n
Laravel\u306b\u95a2\u3057\u3066\u8a73\u3057\u304f\u304a\u8a71\u3092\u805e\u304d\u305f\u3044\u65b9\u3001\u958b\u767a\u76f8\u8ac7\u3084\u7121\u6599\u304a\u898b\u7a4d\u308a\u3092\u3057\u305f\u3044\u65b9\u306f\u3053\u3061\u3089<\/a>\u304b\u3089\u3054\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u25bc deha\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3078\u306e\u7c21\u5358\u898b\u7a4d\u3082\u308a\u306e\u4f9d\u983c\u306f\u3053\u3061\u3089<\/a><\/p>\n\n\n\n
\n
<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
PHP\u306e\u4eba\u6c17\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30afLaravel\u3067\u306fWeb\u30b5\u30a4\u30c8\u306e\u7ba1\u7406\u753b\u9762\u3092\u958b\u767a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u30b7\u30ea\u30fc\u30ba\u3067\u306f\u305d\u3093\u306a\u7ba1\u7406\u753b\u9762\u306e\u69cb\u7bc9\u306b\u95a2\u3057\u3066\u3001\u6280\u8853\u8005\u5411\u3051\u306b\u305d\u306e\u624b\u9806\u3092\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306fVuetify\u3092\u5229\u7528\u3057\u3066CRUD\u3092\u4f5c\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\uff01 Nuxt.js\u304b\u3089Laravel\u306eAPI\u3092Ajax\u3067\u901a\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u624b\u9806\u306f\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3067\u89e3\u8aac\u3002Cookie\u306b\u3088\u308bAPI\u7d4c\u7531\u306e\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u6a5f\u80fd\u3092\u4f5c\u308b\u65b9\u6cd5\u306f\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3067\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002 \u30fbLaravel\u3092\u4f7f\u3063\u3066\u69cb\u7bc9\u3092\u3057\u305f\u3044\u65b9\u30fbWeb\u30b5\u30a4\u30c8\u69cb\u7bc9\u306e\u5177\u4f53\u7684\u306a\u624b\u6cd5\u304c\u77e5\u308a\u305f\u3044\u65b9 \u3053\u308c\u3089\u306b\u5f53\u3066\u306f\u307e\u308b\u65b9\u306b\u304a\u3059\u3059\u3081\u306e\u8a18\u4e8b\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30b7\u30ea\u30fc\u30ba\u3092\u8aad\u3081\u3070Laravel6\u3068Nuxt.js\u3067\u7ba1\u7406\u753b\u9762\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3088\u3002<\/p>\n","protected":false},"author":2,"featured_media":3928,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[],"yoast_head":"\nVuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine<\/title>\n<meta name=\"description\" content=\"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine\" \/>\n<meta property=\"og:description\" content=\"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2\" \/>\n<meta property=\"og:url\" content=\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\" \/>\n<meta property=\"og:site_name\" content=\"DEHA Magazine\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-15T07:33:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T15:00:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2020\/06\/logo3.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"569\" \/>\n\t<meta property=\"og:image:height\" content=\"427\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mai Tran\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mai Tran\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\"},\"author\":{\"name\":\"Mai Tran\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/#\/schema\/person\/301963170c966f39bbe2f7914450e1f9\"},\"headline\":\"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011\",\"datePublished\":\"2020-06-15T07:33:57+00:00\",\"dateModified\":\"2021-07-19T15:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\"},\"wordCount\":122,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/#organization\"},\"articleSection\":[\"\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\",\"url\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\",\"name\":\"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/#website\"},\"datePublished\":\"2020-06-15T07:33:57+00:00\",\"dateModified\":\"2021-07-19T15:00:21+00:00\",\"description\":\"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2\",\"breadcrumb\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/deha.co.jp\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/#website\",\"url\":\"https:\/\/deha.co.jp\/magazine\/\",\"name\":\"DEHA Magazine\",\"description\":\"DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2\",\"publisher\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/deha.co.jp\/magazine\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/#organization\",\"name\":\"Deha Magazine\",\"url\":\"https:\/\/deha.co.jp\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2025\/06\/DEHA-Solutions-Site-icon.png\",\"contentUrl\":\"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2025\/06\/DEHA-Solutions-Site-icon.png\",\"width\":780,\"height\":780,\"caption\":\"Deha Magazine\"},\"image\":{\"@id\":\"https:\/\/deha.co.jp\/magazine\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/deha.co.jp\/magazine\/#\/schema\/person\/301963170c966f39bbe2f7914450e1f9\",\"name\":\"Mai Tran\",\"sameAs\":[\"https:\/\/deha.co.jp\"],\"url\":\"https:\/\/deha.co.jp\/magazine\/author\/maitt\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine","description":"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/","og_locale":"en_US","og_type":"article","og_title":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine","og_description":"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2","og_url":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/","og_site_name":"DEHA Magazine","article_published_time":"2020-06-15T07:33:57+00:00","article_modified_time":"2021-07-19T15:00:21+00:00","og_image":[{"width":569,"height":427,"url":"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2020\/06\/logo3.jpeg","type":"image\/jpeg"}],"author":"Mai Tran","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mai Tran","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#article","isPartOf":{"@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/"},"author":{"name":"Mai Tran","@id":"https:\/\/deha.co.jp\/magazine\/#\/schema\/person\/301963170c966f39bbe2f7914450e1f9"},"headline":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011","datePublished":"2020-06-15T07:33:57+00:00","dateModified":"2021-07-19T15:00:21+00:00","mainEntityOfPage":{"@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/"},"wordCount":122,"commentCount":0,"publisher":{"@id":"https:\/\/deha.co.jp\/magazine\/#organization"},"articleSection":["\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/","url":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/","name":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011 - DEHA Magazine","isPartOf":{"@id":"https:\/\/deha.co.jp\/magazine\/#website"},"datePublished":"2020-06-15T07:33:57+00:00","dateModified":"2021-07-19T15:00:21+00:00","description":"\u30d9\u30c8\u30ca\u30e0\u6280\u8853\u8005\u96c6\u56e3DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2","breadcrumb":{"@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/deha.co.jp\/magazine\/admin-laravel-nuxt-crud\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/deha.co.jp\/magazine\/"},{"@type":"ListItem","position":2,"name":"Vuetify\u3067CRUD\u3092\u4f5c\u308b\u624b\u9806\u3010Laravel6\u3068Nuxt.js\u3067\u4f5c\u308b\u7ba1\u7406\u753b\u9762\u3011"}]},{"@type":"WebSite","@id":"https:\/\/deha.co.jp\/magazine\/#website","url":"https:\/\/deha.co.jp\/magazine\/","name":"DEHA Magazine","description":"DEHA\u304c\u304a\u5c4a\u3051\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u60c5\u5831\u30e1\u30c7\u30a3\u30a2","publisher":{"@id":"https:\/\/deha.co.jp\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/deha.co.jp\/magazine\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/deha.co.jp\/magazine\/#organization","name":"Deha Magazine","url":"https:\/\/deha.co.jp\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/deha.co.jp\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2025\/06\/DEHA-Solutions-Site-icon.png","contentUrl":"https:\/\/deha.co.jp\/magazine\/wp-content\/uploads\/2025\/06\/DEHA-Solutions-Site-icon.png","width":780,"height":780,"caption":"Deha Magazine"},"image":{"@id":"https:\/\/deha.co.jp\/magazine\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/deha.co.jp\/magazine\/#\/schema\/person\/301963170c966f39bbe2f7914450e1f9","name":"Mai Tran","sameAs":["https:\/\/deha.co.jp"],"url":"https:\/\/deha.co.jp\/magazine\/author\/maitt\/"}]}},"_links":{"self":[{"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/posts\/3785"}],"collection":[{"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/comments?post=3785"}],"version-history":[{"count":99,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/posts\/3785\/revisions"}],"predecessor-version":[{"id":6108,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/posts\/3785\/revisions\/6108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/media\/3928"}],"wp:attachment":[{"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/media?parent=3785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/categories?post=3785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deha.co.jp\/magazine\/wp-json\/wp\/v2\/tags?post=3785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}