Giter Club home page Giter Club logo

vue-material-dashboard-laravel-bs4's Introduction

version license GitHub issues open GitHub issues closed

Frontend version: Material Dashboard v2.1.2. More info at https://www.creative-tim.com/product/material-dashboard

Vue version: Vue Material Dashboard v1.4.0. More info at https://www.creative-tim.com/product/vue-material-dashboard

Product Image

What if your frontend came not only with reusable components, but also with a reusable backend? API-driven development is more than just a buzzword and we partnered with UPDIVISION to prove it. Build awesome-looking apps with a flexible architecture across a variety of devices and operating systems with Vue Material Dashboard Laravel.

If you want to get more features, go PRO with Vue Material Dashboard PRO Laravel

Download

For the free version of the project you can either

  • download the .zip file from the Creative Tim site and extract it or
  • make a clone from the Github repository

You will get two project folders: one for the Laravel API project and one for the Vue frontend.

Laravel API Setup

Introduction

JSON:API is a specification for how a client should request that resources be fetched or modified, and how a server should respond to those requests. It is designed to minimize both the number of requests and the amount of data transmitted between clients and servers. This efficiency is achieved without compromising readability, flexibility, or discoverability.

Click here to go to the JSON:API docs

Prerequisites

JSON:API backend

The Laravel JSON:API backend project requires a proper multi-threaded web server such as Apache/Nginx environment with PHP, Composer and MySQL.

Do not use php artisan serve as it will result in stalled requests due to the single-threaded nature of the built-in PHP web server.

We strongly recommend using Laradock for Linux and Mac or Laragon for Windows if possible.

Other options for your local environment:

You will also need to install Composer 2: https://getcomposer.org/doc/00-intro.md

Vue Material frontend

The Vue Material frontend project requires a working local environment with NodeJS version 8.9 or above (8.11.0+ recommended), npm, VueCLI.

Install Node: https://nodejs.org/ (version 8.11.0+ recommended)

Install NPM: https://www.npmjs.com/get-npm

Install VueCLI: https://cli.vuejs.org/guide/installation.html

Laravel JSON:API Project Installation

  1. Navigate in your Laravel API project folder: cd your-laravel-json-api-project
  2. Install project dependencies: composer install
  3. Create a new .env file: cp .env.example .env
  4. Add your own database credentials in the .env file in DB_DATABASE, DB_USERNAME, DB_PASSWORD
  5. Create users table: php artisan migrate --seed
  6. Generate application key: php artisan key:generate
  7. Install Laravel Passport: php artisan passport:install and set in the .env file the CLIENT_ID and CLIENT_SECRET that you receive
  8. Add your own mailtrap.io credentials in MAIL_USERNAME and MAIL_PASSWORD in the .env file

Vue Material Dashboard Project Installation

  1. Navigate to your Vue Dashboard project folder: cd your-vue-material-dashbord-project
  2. Install project dependencies: npm install
  3. Create a new .env file: cp .env.example .env
  4. VUE_APP_BASE_URL should contain the URL of your Vue Material Dashboard Project (eg. http://localhost:8080/)
  5. VUE_APP_API_BASE_URL should contain the URL of your Laravel JSON:API Project. (eg. http://localhost:3000/api/v1)
  6. Run npm run dev to start the application in a local development environment or npm run build to build release distributables.

Element-UI

Vue Material Dashboard json API also uses element-ui components, restyled to fit perfectly with the existing Material look & feel.

Usage

Register a user or login using [email protected] and secret and start testing the theme.

Besides the dashboard and the auth pages this theme also has an edit profile page. All the necessary files are installed out of the box and all the needed routes are added to src\router\index.js. Keep in mind that all the features can be viewed once you log in using the credentials provided above or by registering your own user.

Dashboard

You can access the dashboard either by using the "Dashboards/Dashboard" link in the left sidebar or by adding /home in the URL.

Login

The login functionality is fully implemented in our theme helping you to start your project in no time. To login into dashboard you just have to add /login in the URL and fill the login form with the credentials (user: [email protected] and password: secret).

The src\pages\Dashboard\Pages\Login.vue is the Vue component which handles the login functinality. You can easily adapt it to your needs.

It uses the auth store located in src\store\modules\auth.js.

Login card

<login-card header-color="green">
  <h4 slot="title" class="title">Log in</h4>
  <md-button slot="buttons" ref="#facebook" class="md-just-icon md-simple md-white">
    <i class="fab fa-facebook-square"></i>
  </md-button>
  <md-button slot="buttons" href="#twitter" class="md-just-icon md-simple md-white">
    <i class="fab fa-twitter"></i>
  </md-button>
  <md-button slot="buttons" href="#google" class="md-just-icon md-simple md-white">
    <i class="fab fa-google-plus-g"></i>
  </md-button>
  <p slot="description" class="description">Or Be Classical</p>
  <md-field class="form-group md-invalid" slot="inputs" style="margin-bottom: 28px">
    <md-icon>email</md-icon>
    <label>Email...</label>
    <md-input v-model="email" type="email"/>
    <validation-error :errors="apiValidationErrors.email"/>
  </md-field>
  <md-field class="form-group md-invalid" slot="inputs">
    <md-icon>lock_outline</md-icon>
    <label>Password...</label>
    <md-input v-model="password" type="password"/>
  </md-field>
  <md-button slot="footer" @click="login" class="md-simple md-success md-lg">
    Lets Go
  </md-button>
</login-card>

Register

The register functionality is fully implemented in our theme helping you to start your project in no time. To register a new user you just have to add /register in the URL or click on register link from login page and fill the register form with user details.

The src\pages\Dashboard\Pages\Register.vue is the Vue component which handles the login functinality. You can easily extend it to your needs.

It uses the auth store located in src\store\modules\auth.js.

Register card

<signup-card>
    <h2 class="title text-center" slot="title">Register</h2>
    <div
        class="md-layout-item md-size-50 md-medium-size-50 md-small-size-100 ml-auto"
        slot="content-left"
    >
        <div
        class="info info-horizontal"
        v-for="item in contentLeft"
        :key="item.title"
        >
        <div :class="`icon ${item.colorIcon}`">
            <md-icon>{{ item.icon }}</md-icon>
        </div>
        <div class="description">
            <h4 class="info-title">{{ item.title }}</h4>
            <p class="description">
            {{ item.description }}
            </p>
        </div>
        </div>
    </div>
    <div
        class="md-layout-item md-size-50 md-medium-size-50 md-small-size-100 mr-auto"
        slot="content-right"
    >
        <div class="social-line text-center">
        <md-button class="md-just-icon md-round md-twitter">
            <i class="fab fa-twitter"></i>
        </md-button>
        <md-button class="md-just-icon md-round md-dribbble">
            <i class="fab fa-dribbble"></i>
        </md-button>
        <md-button class="md-just-icon md-round md-facebook">
            <i class="fab fa-facebook-f"></i>
        </md-button>
        <h4 class="mt-3">or be classical</h4>
        </div>

        <md-field class="md-form-group md-invalid" style="margin-bottom: 2rem">
        <md-icon>face</md-icon>
        <label>Name</label>
        <md-input v-model="name"/>
        <validation-error :errors="apiValidationErrors.name"/>
        </md-field>

        <md-field class="md-form-group md-invalid" style="margin-bottom: 2rem">
        <md-icon>email</md-icon>
        <label>Email</label>
        <md-input v-model="email"/>
        <validation-error :errors="apiValidationErrors.email"/>
        </md-field>

        <md-field class="md-form-group md-invalid" style="margin-bottom: 2rem">
        <md-icon>lock_outline</md-icon>
        <label>Password</label>
        <md-input v-model="password" type="password"/>
        <validation-error :errors="apiValidationErrors.password"/>
        </md-field>

        <md-field class="md-form-group md-invalid">
        <md-icon>lock_outline</md-icon>
        <label>Confirm Password</label>
        <md-input v-model="password_confirmation" type="password"/>
        <validation-error :errors="apiValidationErrors.password_confirmation"/>
        </md-field>

        <md-checkbox v-model="boolean">I agree to the <a>terms and conditions</a>.</md-checkbox>

        <div class="button-container">
        <md-button class="md-success md-round mt-4" @click="register" slot="footer">
            Get Started
        </md-button>
        </div>

    </div>
</signup-card>

Profile edit

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "Examples/Profile" link in the left sidebar or add /profile in the URL.

The src\pages\Dashboard\Examples\UserProfile is the folder with Vue components that handle the update of the user information and password.

Edit profile component

<template>
  <form>
    <md-card>

      <md-card-header class="md-card-header-icon">
        <div class="card-icon">
          <md-icon>perm_identity</md-icon>
        </div>
        <h4 class="title">
          Edit Profile
        </h4>
      </md-card-header>

      <md-card-content>
        <div class="md-layout">
          <label class="md-layout-item md-size-15 md-form-label">
            Profile Photo
          </label>
          <div class="md-layout-item">
            <div class="file-input">
              <div v-if="avatar_img">
                <div class="image-container">
                  <img :src="avatar_img"/>
                </div>
              </div>
              <div class="image-container" v-else>
                <img :src="default_img"/>
              </div>
              <div class="button-container">
                <md-button class="md-danger md-round" @click="removeImage" v-if="avatar_img">
                  <i class="fa fa-times"/>
                  Remove
                </md-button>
                <md-button class="md-success md-fileinput">
                  <template v-if="!avatar_img">Select image</template>
                  <template v-else>Change</template>
                  <input type="file" @change="onFileChange"/>
                </md-button>
              </div>
            </div>
          </div>
        </div>

        <div class="md-layout">
          <label class="md-layout-item md-size-15 md-form-label">
            Name
          </label>
          <div class="md-layout-item">
            <md-field class="md-invalid">
              <md-input v-model="user.name"/>
              <validation-error :errors="apiValidationErrors.name"/>
            </md-field>
          </div>
        </div>

        <div class="md-layout">
          <label class="md-layout-item md-size-15 md-form-label">
            Email
          </label>
          <div class="md-layout-item">
            <md-field class="md-invalid">
              <md-input v-model="user.email"/>
              <validation-error :errors="apiValidationErrors.email"/>
            </md-field>
          </div>
        </div>

      </md-card-content>

      <md-card-actions>
        <md-button @click="updateProfile()">
          Update Profile
        </md-button>
      </md-card-actions>

    </md-card>
  </form>
</template>
<script>
  import {ValidationError} from "@/components";
  import formMixin from "@/mixins/form-mixin";

  export default {
    name: "edit-profile-card",

    props: {
      user: Object
    },

    components: {ValidationError},

    mixins: [formMixin],

    data() {
      return {
        avatar_img: null,
        default_img: process.env.VUE_APP_APP_BASE_URL + "/img/placeholder.jpg",
        file: null
      }
    },

    methods: {

      onFileChange(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.createImage(files[0]);
      },

      createImage(file) {
        let reader = new FileReader();
        reader.onload = e => {
          this.avatar_img = e.target.result;
          this.file = file;
        }
        reader.readAsDataURL(file);
      },

      removeImage() {
        this.avatar_img = null;
      },

      async updateProfile() {
        try {
          if (!this.user.profile_image) {
            await this.$store.dispatch("users/upload", {user: this.user, image: this.file})
            this.user.profile_image = await this.$store.getters["profile/url"]
          }
          await this.$store.dispatch("profile/update", this.user)
          await this.$store.dispatch("alerts/success", "Profile updated successfully.")
          this.user = await this.$store.getters["profile/me"]
        } catch (e) {
          await this.$store.dispatch("alerts/error", "Oops, something went wrong!")
          this.setApiValidation(e.response.data.errors)
        }

      }

    }
  };
</script>

Edit password component

<template>
  <form ref="password_form">

    <md-card>

      <md-card-header class="md-card-header-icon">
        <div class="card-icon">
          <md-icon>perm_identity</md-icon>
        </div>
        <h4 class="title">
          Change Password
        </h4>
      </md-card-header>

      <md-card-content>
        <div class="md-layout">
          <div class="md-layout-item md-size-100">
            <md-field class="md-invalid">
              <label>Current Password</label>
              <md-input v-model="password" type="password"/>
              <validation-error :errors="apiValidationErrors.password"/>
            </md-field>
            <md-field class="md-invalid">
              <label>New Password</label>
              <md-input v-model="new_password" type="password"/>
              <validation-error :errors="apiValidationErrors.password_confirmation"/>
            </md-field>
            <md-field class="md-invalid">
              <label>Confirm New Password</label>
              <md-input v-model="confirm_password" type="password"/>
              <validation-error :errors="apiValidationErrors.password_confirmation"/>
            </md-field>
          </div>
        </div>
      </md-card-content>

      <md-card-actions>
        <md-button @click="changePassword()">
          Change Password
        </md-button>
      </md-card-actions>
    </md-card>

  </form>
</template>

<script>
  import {ValidationError} from "@/components";
  import formMixin from "@/mixins/form-mixin";
  export default {
    name: "edit-password-card",

    props: {
      user: Object
    },

    components: {ValidationError},

    mixins: [formMixin],

    data: () => ({
      password: null,
      new_password: null,
      confirm_password: null
    }),

    methods: {
      async changePassword() {

        this.user.password = this.password;
        this.user.password_new = this.new_password;
        this.user.password_confirmation = this.confirm_password;

        try {
          await this.$store.dispatch("users/update", this.user)
          await this.$store.dispatch("alerts/error", "Password changed successfully.")
          this.user = await this.$store.getters["profile/me"]
          this.$refs['password_form'].reset()
        } catch (e) {
          await this.$store.dispatch("alerts/error", "Oops, something went wrong!")
          this.setApiValidation(e.response.data.errors)
        }

      }
    }
  };
</script>

Table of Contents

Versions

HTML Laravel
Material Dashboard HTML Material Dashboard Laravel
Vue Vue & Laravel
Vue Material Dashboard Vue Material Dashboard Laravel

Demo

Register Login Dashboard
Register Login Dashboard
Profile Page Users Page Tables Page
Profile Page Users Page Tables Page
View More

Documentation

The documentation for the Vue Material Dashboard Laravel is hosted at our website.

File Structure

|   .browserslistrc
|   .eslintrc.js
|   .gitignore
|   .jshintrc
|   babel.config.js
|   CHANGELOG.md
|   package-lock.json
|   package.json
|   postcss.config.js
|   README.md
|   yarn.lock
|
+---public
|   |   .DS_Store
|   |   favicon.png
|   |   index.html
|   |
|   \---img
|       |   apple-icon.png
|       |   bg-pricing.jpg
|       |   bg3.jpg
|       |   bg9.jpg
|       |   card-1.jpg
|       |   card-2.jpg
|       |   card-3.jpg
|       |   default-avatar.png
|       |   favicon.png
|       |   image_placeholder.jpg
|       |   laravel-vue.svg
|       |   lock.jpg
|       |   login.jpg
|       |   mask.png
|       |   new_logo.png
|       |   placeholder.jpg
|       |   product1.jpg
|       |   product2.jpg
|       |   product3.jpg
|       |   register.jpg
|       |   sidebar-1.jpg
|       |   sidebar-2.jpg
|       |   sidebar-3.jpg
|       |   sidebar-4.jpg
|       |   vue-logo.png
|       |
|       \---faces
|               avatar.jpg
|               card-profile1-square.jpg
|               card-profile2-square.jpg
|               marc.jpg
|
\---src
    |   .DS_Store
    |   App.vue
    |   globalComponents.js
    |   globalDirectives.js
    |   main.js
    |   material-dashboard.js
    |
    +---assets
    |   |   .DS_Store
    |   |
    |   +---css
    |   |       demo.css
    |   |
    |   +---images
    |   |       avatar.jpg
    |   |
    |   \---scss
    |       |   .DS_Store
    |       |   material-dashboard.scss
    |       |
    |       \---md
    |           |   .DS_Store
    |           |   _alerts.scss
    |           |   _autocomplete.scss
    |           |   _badges.scss
    |           |   _buttons.scss
    |           |   _cards.scss
    |           |   _chartist.scss
    |           |   _checkboxes.scss
    |           |   _collapse.scss
    |           |   _colors.scss
    |           |   _dialogs.scss
    |           |   _dropdown.scss
    |           |   _fileinput.scss
    |           |   _fixed-plugin.scss
    |           |   _footers.scss
    |           |   _forms.scss
    |           |   _headers.scss
    |           |   _info-areas.scss
    |           |   _inputs-size.scss
    |           |   _inputs.scss
    |           |   _layout.scss
    |           |   _misc.scss
    |           |   _mixins.scss
    |           |   _navbars.scss
    |           |   _pages.scss
    |           |   _pagination.scss
    |           |   _pills.scss
    |           |   _popups.scss
    |           |   _progress.scss
    |           |   _radios.scss
    |           |   _responsive.scss
    |           |   _rtl.scss
    |           |   _select.scss
    |           |   _shadows.scss
    |           |   _sidebar-and-main-panel.scss
    |           |   _tables.scss
    |           |   _tabs.scss
    |           |   _tags.scss
    |           |   _timeline.scss
    |           |   _togglebutton.scss
    |           |   _typography.scss
    |           |   _variables.scss
    |           |
    |           +---cards
    |           |       _card-global-sales.scss
    |           |       _card-login.scss
    |           |       _card-pricing.scss
    |           |       _card-product.scss
    |           |       _card-profile.scss
    |           |       _card-signup.scss
    |           |       _card-tabs.scss
    |           |       _card-testimonials.scss
    |           |
    |           +---mixins
    |           |       _chartist.scss
    |           |       _sidebar.scss
    |           |       _transparency.scss
    |           |       _vendor-prefixes.scss
    |           |
    |           \---plugins
    |                   _animate.scss
    |                   _fullcalendar.scss
    |                   _md-datepicker.scss
    |                   _perfect-scrollbar.scss
    |                   _plugin-jquery.jvectormap.scss
    |                   _plugin-nouislider.scss
    |                   _sweetalert2.scss
    |                   _wizard-card.scss
    |
    +---axios
    |       index.js
    |
    +---components
    |   |   .DS_Store
    |   |   Badge.vue
    |   |   Dropdown.vue
    |   |   index.js
    |   |   Logout.vue
    |   |   Pagination.vue
    |   |   Slider.vue
    |   |   Tabs.vue
    |   |   ValidationError.vue
    |   |
    |   +---Cards
    |   |       ChartCard.vue
    |   |       LoginCard.vue
    |   |       NavTabsCard.vue
    |   |       SignupCard.vue
    |   |       StatsCard.vue
    |   |
    |   +---NotificationPlugin
    |   |       index.js
    |   |       Notification.vue
    |   |       Notifications.vue
    |   |
    |   +---SidebarPlugin
    |   |       index.js
    |   |       SideBar.vue
    |   |       SidebarItem.vue
    |   |
    |   \---WorldMap
    |           WorldMap.vue
    |           world_map.js
    |
    +---middleware
    |       auth.js
    |       guest.js
    |
    +---mixins
    |       form-mixin.js
    |
    +---pages
    |   |   .DS_Store
    |   |   FixedPlugin.vue
    |   |
    |   \---Dashboard
    |       |   .DS_Store
    |       |   Dashboard.vue
    |       |
    |       +---Components
    |       |       Icons.vue
    |       |       Notifications.vue
    |       |       Typography.vue
    |       |
    |       +---Examples
    |       |   |   UserProfile.vue
    |       |   |
    |       |   +---UserManagement
    |       |   |       AddUserPage.vue
    |       |   |       EditUserPage.vue
    |       |   |       ListUserPage.vue
    |       |   |
    |       |   \---UserProfile
    |       |           EditPasswordCard.vue
    |       |           EditProfileCard.vue
    |       |           UserProfileCard.vue
    |       |
    |       +---Layout
    |       |   |   Content.vue
    |       |   |   ContentFooter.vue
    |       |   |   DashboardLayout.vue
    |       |   |   TopNavbar.vue
    |       |   |
    |       |   \---Extra
    |       |           MobileMenu.vue
    |       |           UserMenu.vue
    |       |
    |       +---Maps
    |       |       API_KEY.js
    |       |       FullScreenMap.vue
    |       |
    |       +---Pages
    |       |       AuthLayout.vue
    |       |       Login.vue
    |       |       Register.vue
    |       |       RtlSupport.vue
    |       |
    |       \---Tables
    |               RegularTables.vue
    |
    +---router
    |       index.js
    |       routes.js
    |
    \---store
        |   index.js
        |
        +---modules
        |       alerts-module.js
        |       auth.js
        |       categories-module.js
        |       items-module.js
        |       profile-module.js
        |       roles-module.js
        |       tags-module.js
        |       users-module.js
        |
        \---services
                categories-service.js
                items-service.js
                profile-service.js
                roles-service.js
                tags-service.js
                users-service.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

HTML Laravel
Material Dashboard HTML Material Dashboard Laravel
Vue Vue & Laravel
Vue Material Dashboard Vue Material Dashboard Laravel

Change log

Please see the changelog for more information on what has changed recently.

Credits

Reporting Issues

We use GitHub Issues as the official bug tracker for the Vue Material Dashboard Laravel. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Vue Material Dashboard Laravel. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

Useful Links

Social Media

Creative Tim:

Twitter: https://twitter.com/CreativeTim?ref=vmdl-readme

Facebook: https://www.facebook.com/CreativeTim?ref=vmdl-readme

Dribbble: https://dribbble.com/creativetim?ref=vmdl-readme

Instagram: https://www.instagram.com/CreativeTimOfficial?ref=vmdl-readme

Updivision:

Twitter: https://twitter.com/updivision?ref=vmdl-readme

Facebook: https://www.facebook.com/updivision?ref=vmdl-readme

Linkedin: https://www.linkedin.com/company/updivision?ref=vmdl-readme

Updivision Blog: https://updivision.com/blog/?ref=vmdl-readme

Credits

vue-material-dashboard-laravel-bs4's People

Contributors

catalinsimionescu avatar corina-coste avatar eugentudorache avatar mariusconstantin2503 avatar marqbeniamin avatar teamupdivision 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-material-dashboard-laravel-bs4's Issues

Please provide sample step 10,11 of Laravel API Project

I cannot login to Laravel API it error 400 (bad request)
please add detail for step 10,11
10.Add the "Laravel Password Grant Client" id to your .env file under the CLIENT_ID key
11.Add the "Laravel Password Grant Client" secret to your .env file under the CLIENT_SECRET key

Error 404 Refresh

If im on /login or any page if i refresh (f5) juts show error page 404: not found, instead of taking me to the beginning.So i need remove / path at url for return.
Any idea what is happening?

Node Version : 16.13.2
NPM Version: 8.1.2
PHP Version : 7.4

cannot login to free material dashboard, network error. want to see free version work before purchasing

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [x ] I am running the latest version
  • [ x] I checked the documentation and found no answer
  • [x ] I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

able to log into the frontend, with user and password displayed on the login screen

Current Behavior

I can enter the user and password, and I verified that user is in the users table. when I hit "Lets Go" I get a network error.

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. followed the install instructions listed in the vue-material-dashboard README file.
  2. did an 'npm run dev' to start up the dashboard
  3. entered in the user and password specified on the login page.
  4. get an Invalid Credentials popup, and when I Inpect the console I see the error listed above.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device:macbook pro
  • Operating System:BigSur 11.2.2
  • Browser and Version:Chrome 88.0.4324.192 (x86_64)

Failure Logs

at first I got a data undefined error, trying to read response.data when an exception occurs.

when I got the data undefined error, I added a check to Login.vue to check that response and response.data is defined before accessing the data component, and I log the exception to the console, ---it is a network error.
e: Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:83)
xhr.js?b50d:178 POST http://localhost:3000/api/v1/login net::ERR_CONNECTION_REFUSED

got these errors before I tried to login:
GET https://static.hotjar.com/c/hotjar-99526.js?sv=7 net::ERR_NAME_NOT_RESOLVED

VM2835 analytics.js:38 POST https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j88&tid=UA-46172202-1&cid=1170637701.1614098154&jid=581385674&gjid=2097573773&_gid=344549045.1614786264&_u=SACAAEAAQAAAAC~&z=184435371 net::ERR_NAME_NOT_RESOLVED

VM2835 analytics.js:38 POST https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j88&tid=UA-46172202-22&cid=1170637701.1614098154&jid=859596022&gjid=376057807&_gid=344549045.1614786264&_u=SACAAEABQAAAAC~&z=765413393 net::ERR_NAME_NOT_RESOLVED

Laragon

Assuming I use Largon
I understand that to make this work I must not use "php artisan serve" command. When I use PHP ARTISAN SERVE I get the ip:port clearly indicated which I copy and use in .env config file on the frontend Vue side.
In this case I don't get any IP, what do I enter then for variable vor VUE_APP_API_BASE_URL ?
Currently mine are this one follow:
VUE_APP_APP_BASE_URL=http://192.168.1.20:8080/
VUE_APP_API_BASE_URL=http://localhost/laravel-json-api/public/api/v1

When I try to login I get a "Invalid credentials!" but when I look into the Laragon database table I see the admin and secret passowrd properly created into table and when I try to register I get a "Oops something went wrong"

Illuminate\Database\QueryException : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

when trying to migrate i get this error:

Illuminate\Database\QueryException SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter table users add unique users_email_unique(email))

I try to correct using this: https://laravel-news.com/laravel-5-4-key-too-long-error

but in the public function boot there is already this line LaravelJsonApi::defaultApi('v1'); so I don't know well how to handle this.
Schema::defaultStringLength(191);

If I keep both then I get this error: Symfony\Component\Debug\Exception\FatalThrowableError : Class 'App\Providers\Schema' not found

It doesn't work.

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. step 1
  2. step 2
  3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device:
  • Operating System:
  • Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

no file api.php console.php and web.php under routes folder

no file api.php console.php and web.php under routes folder
step

  1. run composer update
  2. error:
    routes/web.php): failed to open stream: No such file or directory
    routes/console.php): failed to open stream: No such file or directory
    routes/api.php): failed to open stream: No such file or directory

npm run dev error

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

npm run dev not working

Current Behavior

What is the current behavior?

Failure Information (for bugs)

ERROR  Failed to compile with 1 error                                                                                              5:52:38 AM

error  in ./src/main.js

Syntax Error: Error: [BABEL] /var/www/html/laramd/vue-material-dashboard/src/main.js: @babel/preset-env: The plugins/built-ins 'es.array.iterator, es.promise, es.object.assign, es.promise.finally' passed to the 'exclude' option are not
   valid. Please check data/[plugin-features|built-in-features].js in babel-preset-env (While processing: "/var/www/html/laramd/vue-material-dashboard/node_modules/@vue/babel-preset-app/index.js.overrides[0]$0")
   at Generator.next (<anonymous>)
   at Generator.next (<anonymous>)
   at Generator.next (<anonymous>)


@ multi (webpack)-dev-server/client?http://172.16.200.96:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: Desktop
  • Operating System: ubuntu 18.04.5 LTS
  • Browser and Version: chrome 89.0.4389.90

api/v1/me is unauthorized on fresh install

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • [ x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Fresh install should be working. It is currently not functional.

Current Behavior

Fresh install gives multiple errors (api and possibly related js errors).

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. fresh install using the installation guide (backend on Apache)
  2. login on the app
  3. see js errors on console at dashboard page such as:
    [Vue warn]: Property or method "upgradeUrl" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at src/pages/Dashboard/Layout/DashboardLayout.vue
at src/App.vue

4. One major error is that while it possible to log in, the json api does not work on retrieving user due to laravel auth api protection. Go to user profile page on the app and see that it is blank. See js error:
GET http://localhost/laravel-json-api/public/index.php/api/v1/me [HTTP/1.1 401 Unauthorized 43ms]

Also

  1. Serving backend on artisan for development purposes hangs on login and does not work at all per this: https://stackoverflow.com/a/59098635. This is a huge time waste and should be explicitly included in the installing guide.
  2. Laravel version is way outdated and cannot be upgraded due dependencies. This also affects laravel passport version, which is related with the reported bug.

Impossible to login

I have installed the files and the database.
I success to create some data when I attempt to register (I see the record in the database) but when I try to login with [email protected]/secret and with [email protected]/secret
Nothing happen
I am runing on Laragon with php 7.2.19 and with mysql 5.7.24
When I try to inspect the login page with Chrome and look at network I got "login" with status "pending"
I checked that laravel is running on server as it indicate in my terminal Laravel development server started: http://127.0.0.1:8000
my .env in the vue-material-dashboard is having this :
VUE_APP_APP_BASE_URL=http://192.168.1.20:8081/
VUE_APP_API_BASE_URL=http://127.0.0.1:8000/api/v1

[Bug] Setting up with NGINX on UBUNTU server

Version

latest

Reproduction link

Nginx file:

server {
    listen 8080;
    
    index index.php index.html index.htm;

    server_name example.com;
    
    return 301 https://example.com$request_uri;

}

server {
    listen 443 ssl;

    server_name example.com;
    root /data/vue-material-dashboard-laravel/laravel-json-api/public;
    
    ssl_certificate /etc/nginx/ssl/cert.pem;
    ssl_certificate_key /etc/nginx/ssl/key.pem;    
	
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

   # location ~ /\.(?!well-known).* {
   #     deny all;
   # }
}

Operating System

Ubuntu

Device

server

Browser & Version

firefox, latest

Steps to reproduce

  1. I set all up according to documentation and run npm run build.
  2. I let nginx server the laravel/public folder. I use a rather minimal nginx configration in sites-enabled folder (see nginx code above)

What is expected?

I use the npm command, output tells me to look at http://example.com:8081
Everything looks fine and login should be working with default given login

What is actually happening?

I get some sort of backend, but cannot login.
It says: "Invalid credentials"

Solution

Do you maybe have a nice example of how nginx should server the app?
I could not find anything online. I tried running vue-material-dashboard over https by adding "vue.config.js":

module.exports = {
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8081, // CHANGE YOUR PORT HERE!
    https: true,
    hotOnly: false,
  },
}

Then indeed everything goes through https but login does still not work. Any ideas why? Seems api does not communicatie well with vue

Additional comments

If we can let it all work on a linux server we woudl want to go and buy the PRO version eventually (after we tested it and so on)

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.