ux-powered

Prepare for scaffolding:

Duplicate your package.json.
Create empty resources/js/bootstrap.js, resources/sass/app.scss and resources/sass/_variables.scss files.

Installing and scaffolding:

composer require laravel/ui

The code snippet of PhotoSwipe + Swiper integration. Works for both looped and non-looped sliders.

Create libs/photoswipe/photoswipe-swiper.js
Import the created file in the libs/photoswipe/photoswipe.js and export initPhotoSwipeWithSwiper function
Init PhotoSwipe on the .swiper-wrapper element

Note: You can include libs/photoswipe/photoswipe.js and use both initPhotoSwipeFromDOM() and initPhotoSwipeWithSwiper() functions; or include only libs/photoswipe/photoswipe-swiper.js if you don't need default PhotoSwipe initializer.

The guide how to deploy a Laravel project to a subdirectory.

Let's assume we want to deploy our laravel-demo app to http://example.com/laravel_demo/. Here's what you will need to do:

Add the next key to your .env config:

ASSET_URL=

Do not forget to install required packages:

yarn add react-app-polyfill url-polyfill custom-event-polyfill

CRA dev server doesnt support IE10, so if you need to test the app in IE10, prepend the next line to the <head> block in public/index.html:

``

The guide how to deploy a Laravel-Vue project to a subdirectory.

Let's assume we want to deploy our app to http://example.com/projects/laravel-vue-demo/. Here's what you will need to do:

Add the next keys to your .env config:

APP_PUBLIC_PATH=
VUE_PUBLIC_PATH=/

	{
	"presets": [
	"@babel/react",
	[
	"@babel/env",
	{
	"targets": {
	"browsers": [
	">= 1%",
	"last 2 versions",

	bower_components/
	build/Release/
	node_modules/
	jspm_packages/
	typings/
	.next/
	.nuxt/
	dist/

	/vendor/libs/*/.js

	import { BrowserModule, Title } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { FormsModule, ReactiveFormsModule } from '@angular/forms';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { DropzoneModule } from 'ngx-dropzone-wrapper';
	import { DropzoneModalComponent } from './page/dropzone-modal.component'

	// *******************************************************************************
	// NgBootstrap

	function setSidenavWidth (widthInPixels) {
	let styleEl = document.getElementById('sidenav-width-stylesheets')
	const sidenavWidth = Math.round(widthInPixels / 16 * 1000) / 1000
	const sidenavCollapsedWidth = 4.375 // rem

	if (!styleEl) {
	styleEl = document.createElement('style')
	styleEl.type = 'text/css'
	styleEl.id = 'sidenav-width-stylesheets'
	document.querySelector('head').appendChild(styleEl)

	<div id="dict-container"></div>
	<button id="dict-add" class="btn btn-primary">Add</button>
	<button id="dict-clear" class="btn btn-danger">Clear all</button>