Migration to vu2.x

gulpfile.js

@@ -1,9 +1,11 @@
-var elixir = require('laravel-elixir');
-elixir.config.js.browserify.watchify.options.poll = true;
+const elixir = require('laravel-elixir');
+// elixir.config.js.browserify.watchify.options.poll = true;
 
 // elixir.config.js.browserify.transformers.push({
 //     name: 'vueify'
 // });
+// require('laravel-elixir-vue-2');
+require('laravel-elixir-browserify-official');
 require('laravel-elixir-vueify');
 require('laravel-elixir-livereload');
 
@@ -20,7 +22,7 @@ require('laravel-elixir-livereload');
 
 elixir(function(mix) {
     mix.less('../themes/clean-blog/clean-blog.less')
-    
+
     mix.browserify('main.js')
     mix.browserify('theme.js')
     mix.version(['public/js/main.js', 'public/js/theme.js']);

package.json

@@ -3,34 +3,40 @@
     "prod": "gulp --production",
     "dev": "gulp watch"
   },
+  "browser": {
+     "vue": "vue/dist/vue.common.js"
+   },
   "devDependencies": {
-    "babel-core": "^6.9.1",
+    "aliasify": "^2.1.0",
+    "babel-core": "^6.26.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-runtime": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-runtime": "^6.9.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-runtime": "^6.26.0",
     "babelify": "^7.3.0",
     "bootstrap-sass": "^3.3.6",
     "css-loader": "^0.23.1",
     "gulp": "^3.9.1",
     "gulp-livereload": "^3.8.1",
     "jquery": "^2.2.3",
-    "laravel-elixir": "^5.0.0",
+    "laravel-elixir": "^6.0.0-16",
+    "laravel-elixir-browserify-official": "^0.1.3",
     "laravel-elixir-livereload": "^1.1.5-beta",
-    "laravel-elixir-vueify": "^1.0.3",
-    "pnotify": "^3.0.0",
+    "laravel-elixir-vue": "^0.1.4",
+    "laravel-elixir-vue-2": "^0.3.0",
+    "laravel-elixir-vueify": "^2.0.0",
+    "pnotify": "^3.2.1",
     "sweetalert2": "^4.0.5",
-    "vue": "^1.0.25",
     "vue-hot-reload-api": "^1.3.2",
     "vue-html-loader": "^1.2.2",
-    "vue-loader": "^8.5.2",
-    "vue-multiselect": "^0.3.0",
-    "vue-resource": "0.8.0",
-    "vue-router": "^0.7.13",
+    "vue-loader": "^11.3.4",
+    "vue-multiselect": "^2.0.3",
+    "vue-router": "^3.0.0",
     "vue-style-loader": "^1.0.0",
-    "vueify": "^8.5.4",
-    "webpack": "^1.13.1"
+    "vueify": "^9.4.1",
+    "watchify": "^3.9.0",
+    "webpack": "^1.15.0"
   },
   "name": "vuejs-news",
   "description": "[![Build Status](https://travis-ci.org/laravel/framework.svg)](https://travis-ci.org/laravel/framework) [![Total Downloads](https://poser.pugx.org/laravel/framework/d/total.svg)](https://packagist.org/packages/laravel/framework) [![Latest Stable Version](https://poser.pugx.org/laravel/framework/v/stable.svg)](https://packagist.org/packages/laravel/framework) [![Latest Unstable Version](https://poser.pugx.org/laravel/framework/v/unstable.svg)](https://packagist.org/packages/laravel/framework) [![License](https://poser.pugx.org/laravel/framework/license.svg)](https://packagist.org/packages/laravel/framework)",
@@ -40,10 +46,18 @@
     "test": "tests"
   },
   "dependencies": {
+    "axios": "^0.16.2",
     "dropzone": "^4.3.0",
+    "laravel-elixir": "^6.0.0-15",
     "simplemde": "^1.11.2",
-    "vue-multiselect": "^0.3.0",
-    "vuejs-paginator": "^1.0.14"
+    "vue": "^2.4.4",
+    "vue-multiselect": "^2.0.0-beta.15",
+    "vuejs-paginator": "^2.0.2"
+  },
+  "aliasify": {
+    "aliases": {
+      "vue": "vue/dist/vue.js"
+    }
   },
   "author": "Alex Kyriakidis <hootlex@icloud.com>",
   "license": "MIT",

readme.md

@@ -1,10 +1,13 @@
+
 # Vuedo ![logo](http://i.imgur.com/iBEAx7O.png?2)
 [![Build Status](https://travis-ci.org/Vuedo/vuedo.svg?branch=master)](https://travis-ci.org/Vuedo/vuedo) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE) [![Join the chat at https://gitter.im/vuedo/Lobby](https://badges.gitter.im/vuedo/Lobby.svg)](https://gitter.im/vuedo/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 ## What is Vuedo?
 
 Vuedo is an open source project built with Laravel and Vue.js. It is a live example of how everything works together.
 
+Interested in more theory? Here is the [official announcement](https://dotdev.co/announcing-vuedo-an-open-source-project-built-with-laravel-and-vue-js-84f371409401).
+
 ## Website using Vuedo in production : [https://vuejsfeed.com/](https://vuejsfeed.com/)
 
 Vue.js Feed is a place where News, Tutorials, Plugins, Showcases and more things regarding Vue are handpicked and shared with the community.

resources/assets/js/App.vue

@@ -1,25 +1,27 @@
 <template>
-<div >
-  <navbar></navbar>
-  <sidebar></sidebar>
-</div>
   <div id="app">
-    <div class="content-wrapper">
-      <!-- Content Header (Page header) -->
-      <section class="content-header">
-        <h1>
-          Admin Panel
-          <small>Everything is here.</small>
-        </h1>
-      </section>
+    <div class="navigation">
+      <navbar></navbar>
+      <sidebar></sidebar>
+    </div>
+    <div>
+      <div class="content-wrapper">
+        <!-- Content Header (Page header) -->
+        <section class="content-header">
+          <h1>
+            Admin Panel
+            <small>Everything is here.</small>
+          </h1>
+        </section>
 
-      <!-- Main content -->
-      <section class="content">
-        <!-- Your Page Content Here -->
-        <!-- route outlet -->
-        <router-view></router-view>
-      </section>
-      <!-- /.content -->
+        <!-- Main content -->
+        <section class="content">
+          <!-- Your Page Content Here -->
+          <!-- route outlet -->
+          <router-view></router-view>
+        </section>
+        <!-- /.content -->
+      </div>
     </div>
   </div>
 </template>
@@ -29,13 +31,11 @@
 import Navbar from './components/layouts/Navbar.vue'
 import Sidebar from './components/layouts/Sidebar.vue'
 
-
-
 export default {
+  name: 'app',
   components: {
     Navbar,
     Sidebar
-  },
-  replace: false
+  }
 }
 </script>

resources/assets/js/components/Categories.vue

@@ -9,25 +9,26 @@
           <h3 class="box-title">All Categories</h3>
         </div>
         <!-- /.box-header -->
-        <div class="box-body table-responsive no-padding">
-          <table class="table table-hover">
+        <div class="box-body table-responsive">
+          <table class="table table-striped">
             <tr>
-              <th>Category Name</th>
-              <th>Icon</th>
+              <th class="col-xs-2 col-md-3 col-lg-4">Category Name</th>
+              <th class="col-xs-2 col-md-3 col-lg-4">Icon</th>
+              <th class="col-xs-8 col-md-6 col-lg-4">Actions</th>
             </tr>
             <tr v-for="category in categories">
-              <td>
+              <td class="col-xs-2 col-md-3 col-lg-4">
                 {{category.name}}
               </td>
-              <td>{{category.icon}}</td>
-              <td class="col-sm-3">
+              <td class="col-xs-2 col-md-3 col-lg-4">{{category.icon}}</td>
+              <td class="col-xs-8 col-md-6 col-lg-4">
                 <div class="btn-group">
-                    <button type="button" v-link="{ name: 'postincats', params: {hashid: category.hashid}}" class="btn btn-success">
-                      View posts
-                    </button>
-                    <button type="button" v-link="{ name: 'categories', params: {hashid: category.hashid}}" class="btn btn-warning">
-                      Edit
-                    </button>
+                  <router-link :to="{ name: 'postincats', params: { hashid: category.hashid }}" tag="button" class="btn btn-success">
+                    View posts
+                  </router-link>
+                  <router-link :to="{ name: 'categories', params: { hashid: category.hashid }}" tag="button" class="btn btn-warning">
+                    Edit
+                  </router-link>
                     <button class="btn btn-danger" @click="deleteCategory(category)">Delete</button>
                 </div>
               </td>
@@ -43,10 +44,12 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import { stack_bottomright, show_stack_success, show_stack_error, show_stack_info } from '../Pnotice.js'
 
 export default {
-  ready () {
+  name: 'CategList',
+  mounted () {
     this.fetchCategories()
   },
   data () {
@@ -56,14 +59,14 @@ export default {
   },
   methods: {
     fetchCategories () {
-      this.$http({url: '/api/categories/', method: 'GET'}).then(function (response) {
-        this.$set('categories', response.data.data)
+      axios.get('/api/categories/').then(response => {
+        Vue.set(this, 'categories', response.data.data)
       })
     },
     createCategory () {
-      this.$http({url: '/api/categories', method: 'POST'}).then(function (response) {
+      axios.post('/api/categories').then(response => {
         show_stack_info('Creating Category...', response)
-        this.$router.go('/categories/'  + response.data.hashid + '/edit')
+        this.$router.push('/categories/'  + response.data.hashid + '/edit')
       })
     },
     deleteCategory (category) {
@@ -76,7 +79,8 @@ export default {
         confirmButtonText: 'Yes, delete it!',
         cancelButtonText: 'No, keep it',
       }).then(function() {
-        self.categories.$remove(category)
+        // self.categories.$remove(category)
+        var index = self.categories.indexOf(category); self.categories.splice(index, 1)
         self.$http.delete('/api/categories/' + category.hashid, category).then(function (response) {
           swal(
             'Deleted!',