Fixed issues with webpack 2. (#239)

Updated root .gitignore in order to block nuget packages folder.

.gitignore

@@ -31,3 +31,5 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+packages/

samples/vuejs-todo-single-file-component/.vscode/settings.json

@@ -1,5 +1,7 @@
 // Place your settings in this file to overwrite default and user settings.
 {
     "tslint.configFile": "./config/tslint.json",
-    "tslint.ignoreDefinitionFiles": true
+    "tslint.ignoreDefinitionFiles": true,
+    "editor.minimap.maxColumn": 80,
+    "editor.minimap.renderCharacters": false
 }

samples/vuejs-todo-single-file-component/README.md

@@ -24,6 +24,7 @@ Version|Date|Comments
 -------|----|--------
 0.0.1|January 27, 2017|Initial version.
 0.0.2|March 30, 2017|Updated to GA
+0.0.3|June 14, 2017|Fix webpack 2 issues
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/vuejs-todo-single-file-component/gulpfile.js

@@ -12,16 +12,18 @@ build.configureWebpack.setConfig({
     additionalConfiguration: function (config) {
         var vueConfig = {
             module: {
-                loaders: [
+                rules: [
                     {
                         test: /\.vue$/,
-                        loader: 'vue-loader'
+                        use: [
-                    }
+                            {
-                ]
+                                loader: 'vue-loader',
+                                options: {
+                                    esModule: true
+                                }
+                            }]
+                    }]
             },
-            vue: {
-                esModule: true
-            }
         };
 
         return merge(config, vueConfig);

samples/vuejs-todo-single-file-component/package.json

@@ -1,32 +1,30 @@
 {
   "name": "vue-todo",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "engines": {
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "@microsoft/sp-client-base": "~1.0.0",
+    "@microsoft/sp-core-library": "~1.1.0",
-    "@microsoft/sp-core-library": "~1.0.0",
+    "@microsoft/sp-webpart-base": "~1.1.1",
-    "@microsoft/sp-webpart-base": "~1.0.0",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
-    "vue": "^2.2.6",
+    "vue": "^2.3.4",
     "vue-class-component": "^5.0.1",
-    "vue-property-decorator": "^4.0.0",
+    "vue-property-decorator": "^5.1.0",
-    "vue-template-compiler": "^2.2.6"
+    "vue-template-compiler": "^2.3.4"
   },
   "devDependencies": {
-    "@microsoft/gulp-core-build-typescript": "^3.0.0",
+    "@microsoft/sp-build-web": "~1.1.0",
-    "@microsoft/sp-build-web": "~1.0.0",
+    "@microsoft/sp-module-interfaces": "~1.1.0",
-    "@microsoft/sp-module-interfaces": "~1.0.0",
+    "@microsoft/sp-webpart-workbench": "~1.1.0",
-    "@microsoft/sp-webpart-workbench": "~1.0.0",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.4",
     "gulp": "~3.9.1",
-    "node-sass": "^4.5.2",
+    "node-sass": "^4.5.3",
-    "sass-loader": "^6.0.3",
+    "sass-loader": "^6.0.5",
-    "vue-loader": "^11.3.4",
+    "vue-loader": "^12.2.1",
     "webpack-merge": "^4.1.0"
   },
   "scripts": {

samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo-item/TodoItem.ts

@@ -3,7 +3,7 @@ import { Component, Prop } from 'vue-property-decorator';
 
 @Component
 export default class TodoItem extends Vue {
-    @Prop
+    @Prop()
     public todoText: string;
 
     public onComplete(): void {

samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo-item/Todoitem.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-    module.exports = require('./todoitem');
+    module.exports = require('./TodoItem');
 </script>
 
-<style scoped src="./todoitem.scss" lang="sass"></style>
+<style scoped src="./todoitem.scss" lang="scss"></style>

samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo/Todo.ts

@@ -9,9 +9,9 @@ import { ITodoWebPartProps } from '../../ITodoWebPartProps';
   }
 })
 export default class Todo extends Vue implements ITodoWebPartProps {
-  @Prop
+  @Prop()
   public message: string;
-  @Prop
+  @Prop()
   public todos: string[];
 
   public mytodos: string[] = this.todos;

samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo/Todo.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-    module.exports = require('./todo');
+    module.exports = require('./Todo');
 </script>
 
-<style scoped src="./todo.scss" lang="sass"></style>
+<style scoped src="./todo.scss" lang="scss"></style>