created conditional render for codesnippet.vue

Author: drewngyen

src/components/CodeSnippet.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <!-- <input type="checkbox" v-model="lineNumbers"> Linenumbers -->
-    {{ `${activeComponent}.vue` }}
+    <p v-if="activeComponent === ''">Select a Component</p>
+    <p v-else >{{ `${activeComponent}.vue` }}</p>
     <prism-editor
       v-model="code"
       language="js"
@@ -23,7 +24,7 @@ import 'vue-prism-editor/dist/VuePrismEditor.css'
 export default {
   data () {
     return {
-      code: `Select a component`,
+      code: `Your component boilerplate will be displayed here`,
       lineNumbers: true,
       height: null
     }
@@ -44,12 +45,10 @@ export default {
     // calls createTemplate and createBoiler to generate snippet
     createCodeSnippet (componentName, children) {
       let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
-      //console.log(`createCodeSnippet result: ${result}`)
       return result
     },
     createTemplate (componentName, children) {
       let output = ``
-      // let htmlArr = this.componentMap[compName].htmlList;
       output += ` <div>\n`
       children.forEach(name => {
         output += `    <${name}>\n    </${name}>\n`
@@ -105,8 +104,6 @@ export default {
 
       this.getWindowHeight()
     })
-    // set code to this new string literal mofo
-    // this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
   },
   // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
   updated () {