#29 Extract wizard step into separate component and expose via scoped slot

dev-example/App.vue

@@ -10,6 +10,15 @@
                  @on-loading="setLoading"
                  @on-error="setError"
                  class="card" ref="wizard">
+      <template slot="step" scope="props">
+        <wizard-step :tab="props.tab"
+                     @click.native="props.navigateToTab(props.index)"
+                     :transition="props.transition"
+                     :key="props.tab.title"
+                     :index="props.index">
+        </wizard-step>
+      </template>
+
        <tab-content title="Personal details" icon="ti-user">
          My first tab
        </tab-content>
@@ -20,13 +29,6 @@
         <div v-if="error">
           {{error}}
         </div>
-      <template slot="footer" scope="props">
-        <div class="wizard-footer-right">
-          <wizard-button :style="props.fillButtonStyle">Cancel</wizard-button>
-          <wizard-button @click.native="props.nextTab()" class="wizard-footer-right" :style="props.fillButtonStyle">Next</wizard-button>
-        </div>
-
-      </template>
     </form-wizard>
   </div>
 </template>