Clever Geek Handbook

Using Grunt with VueJS

I'm trying to tweak VueJS2 with Grunt and Browserify just to prevent the same template error or render function from being defined: [Vue warn]: Failed to mount component: template or render function not defined.

Here's the code:

index.js:

import Vue from 'vue';
import Router from 'vue-router';
import App from './components/App.vue'
import Resource from 'vue-resource'
import indexComponent from './components/index/template.vue'

Vue.use(Router)
Vue.use(Resource)

// route config
let routes = [
  {
    path: '/',
    name: 'home',
    component: indexComponent
  },
  { path: '*', redirect: '/' }
]

// Set up a new router
let router = new Router({
  routes: routes
})

// Start up our app
new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

gruntfile.js:

 browserify: {
   js: {
     files: {
       'src/assets/js/app.js': 'src/js/index.js'
     },
     options: {
       debug: true,
       bundleDelay: 1000,
       transform: [ ["vueify"], ["babelify"] ]
     }
   }
 },

Package.json:

{
  "name": "testing",
  "version": "0.1.0",
  "description": "test",
  "main": "src/index.js",
  "license": "ISC",
  "scripts": {
    "test": "grunt test"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.0.0",
    "babelify": "^6.0.0",
    "browserify": "^14.3.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^5.0.0",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-connect": "^1.0.2",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-sass": "^1.2.1",
    "partialify": "^3.1.5",
    "vue": "^2.3.3",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.5.3",
    "vueify": "^9.4.1"
  }
}

Any help would be appreciated.

+5


source to share


2 answers


If you import Vue from 'vue';

only get a runtime assembly that cannot compile templates, you need a standalone assembly .



+1


source


this error occurs when the system cannot find the template (HTML SPA section) of the .vue file, in which case it could be App.vue or template.vue.

The file must be in the format:



    '<template>
    </template>
    <script>
       export default{}
    </script>
    <style>
    </style>'
0


source






More articles:


All Articles