Browse Source

tweak js bootstrapping

Taylor Otwell 7 years ago
parent
commit
eb289b4170
3 changed files with 48 additions and 17 deletions
  1. 1 0
      package.json
  2. 13 17
      resources/assets/js/app.js
  3. 34 0
      resources/assets/js/bootstrap.js

+ 1 - 0
package.json

@@ -11,6 +11,7 @@
     "laravel-elixir-webpack-official": "^1.0.2"
   },
   "dependencies": {
+    "jquery": "^2.2.4",
     "js-cookie": "^2.1.2",
     "vue": "^1.0.26",
     "vue-resource": "^0.9.3"

+ 13 - 17
resources/assets/js/app.js

@@ -1,26 +1,22 @@
 
-window.Cookies = require('js-cookie');
-
 /**
- * Vue.js
- *
- * Vue is a modern JavaScript for building interactive web interfaces using
- * reacting data binding and reusable components. Vue's API is clean and
- * simple, leaving you to focus only on building your next great idea.
+ * First we will load all of this project's JavaScript dependencies which
+ * include Vue and Vue Resource. This gives a great starting point for
+ * building robust, powerful web applications using Vue and Laravel.
  */
-window.Vue = require('vue');
 
-require('vue-resource');
+require('./bootstrap');
 
 /**
- * The XSRF Header
- *
- * We'll register a HTTP interceptor to attach the "XSRF" header to each of
- * the outgoing requests issued by this application. The CSRF middleware
- * included with Laravel will automatically verify the header's value.
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the body of the page. From here, you may begin adding components to
+ * the application, or feel free to tweak this setup for your needs.
  */
-Vue.http.interceptors.push(function (request, next) {
-    request.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');
 
-    next();
+var app = new Vue({
+    el: 'body',
+
+    ready() {
+        console.log('Application ready.');
+    }
 });

+ 34 - 0
resources/assets/js/bootstrap.js

@@ -0,0 +1,34 @@
+
+window.Cookies = require('js-cookie');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+window.$ = window.jQuery = require('jquery');
+
+require('bootstrap-sass/assets/javascripts/bootstrap');
+
+/**
+ * Vue is a modern JavaScript for building interactive web interfaces using
+ * reacting data binding and reusable components. Vue's API is clean and
+ * simple, leaving you to focus only on building your next great idea.
+ */
+
+window.Vue = require('vue');
+
+require('vue-resource');
+
+/**
+ * We'll register a HTTP interceptor to attach the "XSRF" header to each of
+ * the outgoing requests issued by this application. The CSRF middleware
+ * included with Laravel will automatically verify the header's value.
+ */
+
+Vue.http.interceptors.push(function (request, next) {
+    request.headers['X-XSRF-TOKEN'] = Cookies.get('XSRF-TOKEN');
+
+    next();
+});