about us page template vue js code example

Example 1: how to render file vue template in javascript with gulp

gulp.task('bundle-for-prod', function () {
    return browserify({entries: ['./src/js/entry.js']}) // path to your entry file here
    .transform(vueify)
    .plugin('vueify/plugins/extract-css', { out: './dist/css/bundle.css' }) // path to where you want your css
    .transform(babelify, {"presets": ["es2015"]})
    .transform(uglifyify, {global: true}) // of course if you want to use this transform
    .external('vue') // remove vue from the bundle, if you omit this line whole vue will be bundled with your code
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer()) // you have to use it if you want to use more pipes
    .pipe(uglify()) // This is different from uglifyify transform. I am using both
    .pipe(gulp.dest('./dist/js'));
})

Example 2: vue component template by id

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
  template: '#hello-world-template'
})

https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates