# laravel に vuejs 使うための初期設定

# laravel vuejs 使う

※参考 laravel Blade テンプレート (opens new window)

# npm install

npm i

# blade layout に設定

head に追加

<!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

body の最後に追加

<script src=" {{ mix('js/app.js') }} "></script>

完成イメージ

<!DOCTYPE html>
<html class="no-js" lang="ja">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Language" content="ja">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    <title>Future System | @yield('title','Top Page')</title>
</head>

<body>
    <div id="app">
        <example-component></example-component>
        @yield('content')
    </div>
    <script src=" {{ mix('js/app.js') }} "></script>
</body>

</html>

# bootstrap-vuejs 使う

※参考 https://bootstrap-vue.org/ (opens new window)

# install

## With npm
npm i vue bootstrap-vue bootstrap

## With yarn
yarn add vue bootstrap-vue bootstrap

# app.js 設定

/resources/js/app.js

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";

Vue.use(BootstrapVue);

Vue.component(
  "example-component",
  require("./components/ExampleComponent.vue").default
);

const app = new Vue({
  el: "#app",
});

# ExampleComponent.vue カスタマイズ

/resources/js/components/examplecomponent.vue

<template>
  <div>
    <b-jumbotron header="Title" lead="laravel vuejs">
      <p>test test test test test test test test test</p>
      <b-button @click="showMe" variant="primary" href="#">More</b-button>
    </b-jumbotron>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log("Component mounted.");
  },
  methods: {
    showMe: function() {
      alert("welcome");
    }
  }
};
</script>

OK,完了!

# laravel の強力キャッシュ対応

npm run hot と書く記事もありましたが、自分は watch の方がうまくいく

npm run watch

# Error

途中の遭遇エラー

# ErrorException The Mix manifest does not exist.

ErrorException The Mix manifest does not exist. (View: C:\Users\ndd0033\Desktop\laravel\resources\views\layouts\manage.blade.php) (View: C:\Users\test\Desktop\laravel\resources\views\layouts\manage.blade.php)

解決

webpack のバージョン違いの可能性があったため、npm upgrade

npm i -g npm

# ESLint eslint-loader 実装

必要パッケージ install

npm i -D eslint eslint-loader eslint-plugin-vue

.eslintrc 設定

{
  "root": true,
  "extends": "eslint:recommended",
  "rules": {
    "indent": [2, 2],
    "linebreak-style": [2, "unix"],
    "semi": [2, "always"]
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "jquery": true
  },
  "parserOptions": {
    "sourceType": "module"
  }
}

.eslintrc.js ルール設定

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module",
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended"],

  // add your custom rules here
  //it is base on https://github.com/vuejs/eslint-config-vue
  rules: {
    "vue/max-attributes-per-line": [
      2,
      {
        singleline: 10,
        multiline: {
          max: 1,
          allowFirstLine: false,
        },
      },
    ],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/name-property-casing": ["error", "PascalCase"],
    "vue/no-v-html": "off",
    "accessor-pairs": 2,
    "arrow-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "block-spacing": [2, "always"],
    "brace-style": [
      2,
      "1tbs",
      {
        allowSingleLine: true,
      },
    ],
    camelcase: [
      0,
      {
        properties: "always",
        allow: ["customer_id"],
      },
    ],
    "comma-dangle": [2, "never"],
    "comma-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    curly: [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    eqeqeq: ["error", "always", { null: "ignore" }],
    "generator-star-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "handle-callback-err": [2, "^(err|error)$"],
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
      },
    ],
    "jsx-quotes": [2, "prefer-single"],
    "key-spacing": [
      2,
      {
        beforeColon: false,
        afterColon: true,
      },
    ],
    "keyword-spacing": [
      2,
      {
        before: true,
        after: true,
      },
    ],
    "new-cap": [
      2,
      {
        newIsCap: true,
        capIsNew: false,
      },
    ],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-console": "off",
    "no-class-assign": 2,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 0,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-empty-pattern": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [
      2,
      {
        allowLoop: false,
        allowSwitch: false,
      },
    ],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [
      2,
      {
        max: 1,
      },
    ],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-symbol": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-path-concat": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": [2, "except-parens"],
    "no-self-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unmodified-loop-condition": 2,
    "no-unneeded-ternary": [
      2,
      {
        defaultAssignment: false,
      },
    ],
    "no-unreachable": 2,
    "no-unsafe-finally": 2,
    "no-unused-vars": [
      2,
      {
        vars: "all",
        args: "none",
      },
    ],
    "no-useless-call": 2,
    "no-useless-computed-key": 2,
    "no-useless-constructor": 2,
    "no-useless-escape": 0,
    "no-whitespace-before-property": 2,
    "no-with": 2,
    "one-var": [
      2,
      {
        initialized: "never",
      },
    ],
    "operator-linebreak": [
      2,
      "after",
      {
        overrides: {
          "?": "before",
          ":": "before",
        },
      },
    ],
    "padded-blocks": [2, "never"],
    quotes: [
      2,
      "double",
      {
        avoidEscape: true,
        allowTemplateLiterals: true,
      },
    ],
    semi: [2, "always"],
    "semi-spacing": [
      2,
      {
        before: false,
        after: true,
      },
    ],
    "vue/html-self-closing": [
      "error",
      {
        html: { normal: "never", void: "always" },
      },
    ],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [
      2,
      {
        words: true,
        nonwords: false,
      },
    ],
    "spaced-comment": [
      2,
      "always",
      {
        markers: [
          "global",
          "globals",
          "eslint",
          "eslint-disable",
          "*package",
          "!",
          ",",
        ],
      },
    ],
    "template-curly-spacing": [2, "never"],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yield-star-spacing": [2, "both"],
    yoda: [2, "never"],
    "prefer-const": 2,
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    "object-curly-spacing": [
      2,
      "always",
      {
        objectsInObjects: false,
      },
    ],
    "array-bracket-spacing": [2, "never"],
  },
};

.eslintignore 設定

build/*.js
src/assets
public
dist

webpack.config.js の設定

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.(js|vue)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: {
      vue$: "vue/dist/vue.esm.js",
      "@": path.join(__dirname, "/resources/js"),
    },
  },
};

webpack.mix.js 設定

const config = require("./webpack.config");
const mix = require("laravel-mix");

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");
// .extract(["vue", "axios", "vuex"]);
mix.webpackConfig(config);
2019-06-01
  • php
  • laravel
  • vuejs

関連記事

Nuxtjs 3 に Ant design Vue を使う
Laravel メンテナンスモード
Laravel model で hidden に設定したカラムを一時解除
Laravel でカテゴリー作成 テーブル構築と再帰クエリ
Laravel Queue で非同期処理
Laravel notification メール通知カスタマイズ
Laravel lang バリデーションメッセージを多言語対応
Laravel を API サーバーとしての初期設定
Laravel リクエストログ出力
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Carbon で php date 日付の日数・月数差を計算
Laravel 429 Too Many Requests
Laravel Email バリデーションについて
Laravel Sanctum 使って API トークン JWT 認証と SPA 認証
AWS SES メール開封確認  DB に集計
Laravel logger でエラーログを chatwork に自動送信
php CSV データ取得は fgetcsv 使う
Laravel tinker 使って DB データベース接続とコマンド
Laravel Test についてのメモ
Laravel Log の基本設定&使い方
Exception: Class 'ZipArchive' not found
Laravel Sail で Docker 環境構築
PHP 文字列長さ・文字列の幅を取得方法
Codeigniter 画像アップロードとリサイズ
Laravel Lumen Faker 日本語設定
laravel method の基本 get post put options
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Laravel schedule 設定
Class 'Imagick' not found Error
Laravel eloquent model の規約
PHP mbconvertkana 全角半角英数カナ変換
Codeigniter APPPATH BASEPATH FCPATH 各種パスと URL 取得
Nuxtjs 動的なルーティング静的ページ自動生成
Laravel timestamp() auto update 有効化無効化
Lumen8 で JWT ユーザー認証
Laravel toSql パラメータ付きで出力
Lumen8 で API 開発
php Exception エラーキャッチでメール送信
Smarty HTTP URL 取得できるサーバー関数
Laravel blade foreach loop と current url
laravel session を制する
vuejs v-if と v-show の違い
PHP empty isset is_null の違い
PHP 8 リリース新機能と変更
FlattenException deprecated
php.ini 初期設定のいろいろ
Laravel 5.1 から 8.1 にバージョンアップ
PHP 7.4 にアップグレードして使えなくなる機能
開発時によく使うゼロ埋めパディング作業まとめ
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
解決!phpMyAdmin テーブル構造の内容が表示されない問題
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
codeigniter email ライブラリでメール送信 日本語対応
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
Composer コマンドとオプション
爆速軽量フレームワーク codeigniter PHP 開発
nuxtjs と codeigniter で jwt システム構築
Lumen と Laravel 違い比較
HTML から PDF に変換 PHP ライブラリ mPDF の設定
twig 3 人気 PHP テンプレートエンジンがバージョンアップ
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
Apache 初期設定メモ
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
Laravel Error についてのメモ
polyfill という宝物で開発時の ie11 対応した時のメモ
php curl 使って クリックなしで POST 送信
allowurlinclude の設定で ftp_connect()エラー