Better display of recipe instructions

cuizin/js_src/components/Recipe.vue

@@ -27,7 +27,7 @@
               </li>
           </ul>
           <h2 class="mt-3">Instructions</h2>
-          <p>{{ recipe.instructions }}</p>
+          <nl2br tag="p" :text="recipe.instructions"></nl2br>
           <p v-if="recipe.url" class="text-xs-center">
               <v-btn :href="recipe.url">
                   <v-icon class="fa-icon">fa-external-link</v-icon>

cuizin/js_src/main.js

@@ -6,6 +6,7 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import 'font-awesome/css/font-awesome.css';
 import 'material-design-icons/iconfont/material-icons.css';
 import 'vuetify/dist/vuetify.min.css';
+import Nl2br from 'vue-nl2br';
 
 import App from './App';
 import router from './router';
@@ -14,6 +15,7 @@ import router from './router';
 require('es6-promise').polyfill();
 require('isomorphic-fetch');
 
+Vue.component('nl2br', Nl2br);
 Vue.use(Vuetify);
 
 Vue.config.productionTip = false;

package.json

@@ -17,6 +17,7 @@
     "material-design-icons": "^3.0.1",
     "roboto-fontface": "^0.9.0",
     "vue": "^2.5.2",
+    "vue-nl2br": "^0.0.5",
     "vue-router": "^3.0.1",
     "vuetify": "^1.0.0"
   },