fix(framework-examples): Fix VueJS example (#135)

Resolves #124
[ci skip]

Author: traviskaufman

framework-examples/vue/build/webpack.base.conf.js

@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 
-
 module.exports = {
   entry: {
     app: './src/main.js'
@@ -16,15 +15,14 @@ module.exports = {
   resolve: {
     extensions: ['', '.js', '.vue'],
     fallback: [
-      path.join(__dirname, '../node_modules'),
-      path.join(__dirname, '../../../packages')
+      path.join(__dirname, '../node_modules')
     ],
     alias: {
       'src': path.resolve(__dirname, '../src')
     }
   },
   sassLoader: {
-    includePaths: [path.resolve(__dirname, '../../../packages')]
+    includePaths: [path.resolve(__dirname, '../node_modules')]
   },
   resolveLoader: {
     fallback: [path.join(__dirname, '../node_modules')]
@@ -52,13 +50,13 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel',
-        include: projectRoot,
-	exclude: /node_modules/
+        include: path.join(__dirname, '../node_modules/@material')
       },
       {
         test: /\.js$/,
         loader: 'babel',
-        include: path.join(__dirname, '../../../packages')
+        include: projectRoot,
+        exclude: /node_modules/
       },
       {
         test: /\.json$/,

framework-examples/vue/package.json

@@ -1,5 +1,6 @@
 {
   "name": "v-mdc-example",
+  "private": true,
   "version": "0.1.0",
   "scripts": {
     "start": "node build/dev-server.js"
@@ -47,5 +48,17 @@
     "webpack-dev-middleware": "^1.6.1",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"
+  },
+  "dependencies": {
+    "@material/checkbox": "^0.1.0",
+    "@material/drawer": "^0.1.0",
+    "@material/elevation": "^0.1.0",
+    "@material/form-field": "^0.1.0",
+    "@material/icon-toggle": "^0.1.0",
+    "@material/list": "^0.1.0",
+    "@material/ripple": "^0.1.0",
+    "@material/snackbar": "^0.1.0",
+    "@material/theme": "^0.1.0",
+    "@material/typography": "^0.1.0"
   }
 }

framework-examples/vue/src/App.vue

@@ -118,10 +118,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-ripple/mdc-ripple.scss';
-@import 'mdc-elevation/mdc-elevation.scss';
-@import 'mdc-list/mdc-list.scss';
-@import 'mdc-theme/mdc-theme.scss';
+@import '@material/ripple/mdc-ripple';
+@import '@material/elevation/mdc-elevation';
+@import '@material/list/mdc-list';
+@import '@material/theme/mdc-theme';
 
 .demo-toolbar {
   width: 100%;

framework-examples/vue/src/style.scss

@@ -1 +1 @@
-@import 'mdc-typography/mdc-typography';
+@import "@material/typography/mdc-typography";

framework-examples/vue/src/v-mdc-checkbox/Checkbox.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="babel">
-import { MDCCheckboxFoundation } from 'mdc-checkbox';
+import { MDCCheckboxFoundation } from '@material/checkbox';
 
 const { ANIM_END_EVENT_NAME } = MDCCheckboxFoundation.strings;
 
@@ -86,6 +86,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-checkbox/mdc-checkbox.scss';
-
+@import '@material/checkbox/mdc-checkbox';
 </style>

framework-examples/vue/src/v-mdc-checkbox/CheckboxLabel.vue

@@ -15,6 +15,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-checkbox/mdc-checkbox.scss';
-
+@import '@material/checkbox/mdc-checkbox';
 </style>

framework-examples/vue/src/v-mdc-drawer/TemporaryDrawer.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script lang="babel">
-import { MDCTemporaryDrawerFoundation } from 'mdc-drawer';
-import * as utils from 'mdc-drawer/util';
+import { MDCTemporaryDrawerFoundation } from '@material/drawer';
+import * as utils from '@material/drawer/util';
 
 export default {
   props: ['toolbarSpacer'],
@@ -115,5 +115,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-drawer/mdc-drawer.scss';
+@import '@material/drawer/mdc-drawer';
 </style>

framework-examples/vue/src/v-mdc-form-field/FormField.vue

@@ -11,5 +11,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "mdc-form-field/mdc-form-field.scss";
+@import "@material/form-field/mdc-form-field";
 </style>

framework-examples/vue/src/v-mdc-icon-toggle/IconToggle.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="babel">
-import { MDCIconToggleFoundation } from 'mdc-icon-toggle';
+import { MDCIconToggleFoundation } from '@material/icon-toggle';
 
 export default {
   props: ['toggleOn', 'toggleOff', 'value'],
@@ -99,6 +99,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-icon-toggle/mdc-icon-toggle.scss';
-
+@import '@material/icon-toggle/mdc-icon-toggle';
 </style>

framework-examples/vue/src/v-mdc-ripple/Ripple.js

@@ -1,4 +1,4 @@
-import {MDCRipple} from 'mdc-ripple';
+import {MDCRipple} from '@material/ripple';
 
 export default {
   bind (el, context) {

framework-examples/vue/src/v-mdc-snackbar/Snackbar.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="babel">
-import { MDCSnackbarFoundation } from 'mdc-snackbar';
+import { MDCSnackbarFoundation } from '@material/snackbar';
 
 const { TRANS_END_EVENT_NAME } = MDCSnackbarFoundation.strings;
 
@@ -96,7 +96,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'mdc-button/mdc-button.scss';
-@import 'mdc-snackbar/mdc-snackbar.scss';
-
+@import '@material/button/mdc-button';
+@import '@material/snackbar/mdc-snackbar';
 </style>