From dfcb5b1c4e8cb1f749dc47e7d310b1d0891c8eeb Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Sat, 30 Jun 2018 14:37:53 +0200 Subject: Began Laravel environment --- resources/assets/js/app.js | 22 +++++++++ resources/assets/js/bootstrap.js | 56 ++++++++++++++++++++++ .../assets/js/components/ExampleComponent.vue | 23 +++++++++ resources/assets/sass/_variables.scss | 8 ++++ resources/assets/sass/app.scss | 14 ++++++ 5 files changed, 123 insertions(+) create mode 100644 resources/assets/js/app.js create mode 100644 resources/assets/js/bootstrap.js create mode 100644 resources/assets/js/components/ExampleComponent.vue create mode 100644 resources/assets/sass/_variables.scss create mode 100644 resources/assets/sass/app.scss (limited to 'resources/assets') diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js new file mode 100644 index 0000000..98eca79 --- /dev/null +++ b/resources/assets/js/app.js @@ -0,0 +1,22 @@ + +/** + * First we will load all of this project's JavaScript dependencies which + * includes Vue and other libraries. It is a great starting point when + * building robust, powerful web applications using Vue and Laravel. + */ + +require('./bootstrap'); + +window.Vue = require('vue'); + +/** + * Next, we will create a fresh Vue application instance and attach it to + * the page. Then, you may begin adding components to this application + * or customize the JavaScript scaffolding to fit your unique needs. + */ + +Vue.component('example-component', require('./components/ExampleComponent.vue')); + +const app = new Vue({ + el: '#app' +}); diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js new file mode 100644 index 0000000..fb0f1ed --- /dev/null +++ b/resources/assets/js/bootstrap.js @@ -0,0 +1,56 @@ + +window._ = require('lodash'); +window.Popper = require('popper.js').default; + +/** + * 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. + */ + +try { + window.$ = window.jQuery = require('jquery'); + + require('bootstrap'); +} catch (e) {} + +/** + * We'll load the axios HTTP library which allows us to easily issue requests + * to our Laravel back-end. This library automatically handles sending the + * CSRF token as a header based on the value of the "XSRF" token cookie. + */ + +window.axios = require('axios'); + +window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; + +/** + * Next we will register the CSRF Token as a common header with Axios so that + * all outgoing HTTP requests automatically have it attached. This is just + * a simple convenience so we don't have to attach every token manually. + */ + +let token = document.head.querySelector('meta[name="csrf-token"]'); + +if (token) { + window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; +} else { + console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); +} + +/** + * Echo exposes an expressive API for subscribing to channels and listening + * for events that are broadcast by Laravel. Echo and event broadcasting + * allows your team to easily build robust real-time web applications. + */ + +// import Echo from 'laravel-echo' + +// window.Pusher = require('pusher-js'); + +// window.Echo = new Echo({ +// broadcaster: 'pusher', +// key: process.env.MIX_PUSHER_APP_KEY, +// cluster: process.env.MIX_PUSHER_APP_CLUSTER, +// encrypted: true +// }); diff --git a/resources/assets/js/components/ExampleComponent.vue b/resources/assets/js/components/ExampleComponent.vue new file mode 100644 index 0000000..2805329 --- /dev/null +++ b/resources/assets/js/components/ExampleComponent.vue @@ -0,0 +1,23 @@ + + + diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss new file mode 100644 index 0000000..70ecfdb --- /dev/null +++ b/resources/assets/sass/_variables.scss @@ -0,0 +1,8 @@ + +// Body +$body-bg: #f5f8fa; + +// Typography +$font-family-sans-serif: "Raleway", sans-serif; +$font-size-base: 0.9rem; +$line-height-base: 1.6; diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss new file mode 100644 index 0000000..0077cb1 --- /dev/null +++ b/resources/assets/sass/app.scss @@ -0,0 +1,14 @@ + +// Fonts +@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); + +// Variables +@import "variables"; + +// Bootstrap +@import '~bootstrap/scss/bootstrap'; + +.navbar-laravel { + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); +} -- cgit v1.2.3