Laravel-adminlte: QUESTION: Integration with vue js

Created on 5 Jan 2018  路  4Comments  路  Source: jeroennoten/Laravel-AdminLTE

Hi jeroennoten,

Thank you for developing this awesome laravel-admin. Currently, I'm using your template and implementing vue js 2 for SPA. I just wanna know if it's possible to use vue-router on this template?
Cause i did implement router-link on menu-item.blade.php but it always print the full url. Do you have an example to do this case?

Thank you so much and sorry for bad english.

Most helpful comment

Hello guy!

It's work for me, you can try it.

  • Make sour you have vue-server-renderer version 2.5.0 or latest.
  • Create file => resources/js/components/App.vue
<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>
  • Insert it to => resources/js/app.js
import App from './components/App.vue';
import Vue from 'vue';

new Vue({
  el: '#app'
  render: h => h(App)
});

run command:
$ npm run dev Or $ npm run watch

  • Create file => resources/views/app.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Vue/Laravel SSR App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
  </body>
</html>

And after you just create Route and Controller for view.

I hope it can help you to use Vue js with this package.

All 4 comments

I need Intregation too with vue

Hello guy!

It's work for me, you can try it.

  • Make sour you have vue-server-renderer version 2.5.0 or latest.
  • Create file => resources/js/components/App.vue
<template>
  <div id="app">
    {{ message }}
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World'
      }
    }
  }
</script>
  • Insert it to => resources/js/app.js
import App from './components/App.vue';
import Vue from 'vue';

new Vue({
  el: '#app'
  render: h => h(App)
});

run command:
$ npm run dev Or $ npm run watch

  • Create file => resources/views/app.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Vue/Laravel SSR App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
  </body>
</html>

And after you just create Route and Controller for view.

I hope it can help you to use Vue js with this package.

Is the issue actual?

Is the issue actual?

@RatanaKH solution works well :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ahishamali10 picture ahishamali10  路  5Comments

fagnerfjas picture fagnerfjas  路  5Comments

niltonssjr picture niltonssjr  路  4Comments

vsilva472 picture vsilva472  路  4Comments

santiagoferraz picture santiagoferraz  路  5Comments