Code Monkey home page Code Monkey logo

laravel-vue-spa's Introduction

Laravel Vue SPA

Starter Boilerplate SPA made with Laravel 5.6, Bootstrap 4, JWT Auth, Vue 2, Vue-router 3, Vuex 3, Axios & ❤️

Demo

Laravel Vue SPA

Live Demo

What's New

  • Upgraded to Bootstrap 4 from Bootstrap 3
  • Upgraded to Vuex 3 from Vuex 2
  • Upgraded to Vue Router 3 from Vue Router 2
  • All packages are updated (both PHP and JS)
  • Removed unnecessary vuex store modules
  • Project structure updated

What's included

Installation:

  • Clone the repo
  • Copy .env.example to .env
  • Configure .env
  • cd to the repo
  • Run composer install --no-scripts
  • Run php artisan key:generate
  • Run php artisan migrate --seed. A user will be seeded so that you can login, where:
  • Run npm install
  • Run npm run watch
  • View the site by
    • Either running php artisan serve if you are not using vagrant homestead or laravel valet (in a new terminal/command prompt)
    • Otherwise go to your local dev url configured in vagrant

For any problem in laravel setup, please get help from Laravel site. If that does not work, please create an issue, I will try my best to help.

Note:

I tried to follow the best practices, but any suggestion, modification is highly appreciated.

laravel-vue-spa's People

Contributors

anindya-dhruba avatar dependabot[bot] avatar mobber007 avatar nox04 avatar tristansnowsill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

laravel-vue-spa's Issues

Seeding a new user

c:\xampp\htdocs>php artisan migrate --seed
Migration table created successfully.

In Connection.php line 664:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQ
  L: alter table `users` add unique `users_email_unique`(`email`))


In Connection.php line 458:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

Error about webpack mox

when I do npm run an error popping up.

Error: Cannot find module 'mypath/node_modules/laravel-mix/setup/webpack.config.js'

Using auth for home view

I want to unable site for users not registered

How Can I do it? I know auth middleware in Laravel but Im a begginer in Vue and I dont know.

I woul like access restringed for only users registered

best regards in advanced

Case-sensitivity issues compiling

Just cloned on Linux Ubuntu. All fine running composer install and npm install, but npm run dev fails with the following:

These relative modules were not found:

* ./components/Home/Home.vue in ./resources/assets/js/routes.js
* ./components/Login/Login.vue in ./resources/assets/js/routes.js`

Fixed by changing ./resources/assets/js/routes.js to refer to ./components/home/Home.vue and ./components/login/Login.vue (note using lower case in corrected version). Haven't ever done GitHub pull request, so putting in as an issue as I'm not brave enough!

Love the package, thanks for all your hard work on it.

Login issues

Hi,

Tried serving the site over HTTP using Valet and I was getting CORS errors upon trying to log in and then when serving it securely I get a 'Blocked loading mixed active content "http://localhost/api/authenticate' error instead.

Everything seems to be working fine and it's probably something dumb that I'm doing wrong but any help would be appreciated!

Thanks,
Luke

Name and Email setters

Hello again,

I'm wondering why creating a mutation and setter for each email and name is good practice?
There is any reason for changing the name and email in the vuex state, before updating them through the api?

image

Sorry again for open an issue with this kind of question

I'm talking about these lines:
https://github.com/anindya-dhruba/laravel-vue-spa/blob/master/resources/assets/js/components/edit-profile/EditProfileForm.vue#L40-L60

https://github.com/anindya-dhruba/laravel-vue-spa/blob/master/resources/assets/js/store/modules/auth-user.js#L11-L16

PD: I'm kinda a new Vue developer!

Profile and ProfileWrapper

Hi!, new Vue developer here!
there is a reason to have Profile.vue and ProfileWrapper.vue in two separate folders!?
kinda irrelevant question, but I think these two could be perfectly in the same directory

CORS issue

Hi!

thanks for the boilerplate. unfortuneately I don't get CORS working ("Failed to load http://localhost/api/authenticate: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."). I have tried to use https://github.com/barryvdh/laravel-cors without success so far. What would be the best way to enable CORS? thanks, kind regards

laravel mix. Incorrect route (404)

Hi

When I compile with npm run watch and load app in Js console appear this error:

image

image

I can solve changing:

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

for

<script type="text/javascript" src="{{ asset('public/js/app.js') }}"></script>

in resource/view/app.blade.php

But I want to use Laravel Mix sessions

How Can I solve it?

best regards

Some dependencies cannot be compile on Mac OS

Problem :

I can't run the program because my version of mac os is not compatible with some node module

Mac OS version : 10.14.6

The message I get :

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (72)

Notes

I had to downgrade from Node 12 to Node 8 before I got this message. Node 12 couldn't reach this point.

Fix

I fixed it using Docker to have an environment replicable and more stability for sharing the code, this may probably be added to source code. I chose Apache for easy configuration (with php-apache images) but nginx should be quite much longer to setup. This might need a bit changes but it seems quite ok

### Composer
FROM composer:1.9 AS build-api

WORKDIR /build

ADD / .
RUN composer install --no-ansi --no-dev --no-plugins --no-scripts --no-suggest --optimize-autoloader

### NPM
FROM node:8 AS build-front

WORKDIR /build

COPY --from=build-api /build .
RUN npm install
RUN npm run production

### Running
FROM php:7.3-apache AS homestead

WORKDIR /var/www/html

ENV APACHE_DOCUMENT_ROOT /var/www/html/public

RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

COPY --from=build-front /build .
RUN chown -R www-data .
RUN php artisan key:generate
RUN php artisan migrate --seed

Problem when i login in

Hi,
When i login in i can not see the Profile tab in up menu, and when go to Home tab and go again to login the app does do anything, u can help me please, if i get something wrong with my init configuration.

Thanks.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.