Vue-material: Problems with md-dialog and tabs

[kristianmandrup]

I'm having "huge" problems getting my material components working properly and find it very hard to debug

https://github.com/kristianmandrup/vue2-apollo-scaphold

Cannot read property 'icon' of undefined
    at VueComponent.setActiveTab (vue.app.js:24748)

<template>
  <nav class="top-bar">
    <md-toolbar class="header">
      <md-button class="brand">
        <router-link :to="{ name: 'root' }">Scaphold</router-link>
      </md-button>
    </md-toolbar>
    <section class="right">
      <md-tabs>
        <md-tab id="home" md-label="Home">
          <router-link :to="{ name: 'root' }"></router-link>
        </md-tab>
        <!-- <md-tab><router-link :to="{ name: 'graphiql' }">GraphiQL</router-link></md-tab> -->
        <md-tab id="login" md-label="Login">
          <login></login>
        </md-tab>
        <md-tab id="register" md-label="Register">
          <register></register>
        </md-tab>
      <md-tabs>
    </section>
  </nav>
</template>

My login tab looks as follows:

<template>
  <section @click="open()">
    <md-dialog :v-show="showModal">
      <md-dialog-title>
        <span class="dtitle">Login Here!</span>
      </md-dialog-title>
      <md-dialog-content>
        <div class="label">
          Email
        </div>
        <md-input-container class="usr-input">
          <md-input type="email" placeholder="Email" @change="handleLoginEmailChange()" />
        </md-input-container>

        <div class="label">
          Password
        </div>
        <md-input-container class="usr-input">
          <md-input type="password" placeholder="Password" @change="handleLoginPasswordChange()" />
        </md-input-container>
        <div class="errors">{{ errors }}</div>
      </md-dialog-content>
      <md-dialog-actions>
        <md-button class="primary" type="submit" @click="loginUser()">Login</button>
        <md-button @click="close()">Close</button>
      </md-dialog-actions>
    </md-dialog>
  </section>
</template>

But it seems to be displayed even though the tab is not active. It's a mess!
Any chance you could have a quick look?

Thanks.

[marcosmoura]

Hi @kristianmandrup

Can you try to simulate this on Codepen? I didn't get the error only by looking at the code here.
Thanks.

[kristianmandrup]

Turned out the problem was a missing closing / for the final <md-tabs> ie. </md-tabs>

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'

import VueApollo from 'vue-apollo'
import Router from 'vue-router'
Vue.use(Router)

import apollo from '../apollo' // apollo client plugin for vue
import router from './router'

// https://www.npmjs.com/package/vue-awesome
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/heart'

// Install the vue-apollo plugin and use the apollo client
Vue.use(VueApollo, {
  apollo
})

// use vue-material: https://github.com/marcosmoura/vue-material
Vue.use(VueMaterial)

// Aplly themes
Vue.material.theme.register('default', {
  primary: 'indigo',
  accent: 'pink',
  warn: 'deep-orange',
  background: 'grey'
})

import App from './components/App/App.vue'
App.router = router

new Vue(App).$mount('#root')

And my App.vue using the default theme. Still it doesn't display with any material styling.
Can you spot anything I'm missing?

PS: I'm using webpack 2.

Would be nice if you would include example of (or document) a webpack 1 & 2 configuration/setup.

<template>
  <div v-md-theme="'default'">
    <aheader />
    <router-view />
    <afooter />
  </div>
</template>

I switched to using tabs with md-card item instead of using dialogs (modals was used in original React app I used as the template)

My webpack 2 config

const config = {
  entry: {
    vue: path.resolve(__dirname, 'js', 'vue', 'app.js')
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.js$/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        loader: 'css-loader'
      }
    ]
  },
  output: {
    filename: '[name].app.js',
    path: '/'
  }
}

[kristianmandrup]

[marcosmoura]

Hi @kristianmandrup

You can start the Webpack 2 config from the documentation website (still WIP)

---

I'm not going to add Webpack 2 or related in the documentation for now:

• The APIs of the new webpack are not finished yet
• It's still on beta stage with a lot of breaking changes
• This is low-low priority
• Maybe on the future I can add a "Advanced" section.
• Adding this will create a confusion
• Increase the leaning curve for new users.
• I wont create/change the documentation to fit every single use case.

Unfortunately the early adoption of bleeding-edge-unreleased-new-tools can lead to problems like that and you should be aware that something can be broken. Try to ask on their Gitter. Sorry about that.

Thank you!