Separating script, style and template in Vue.js and Webpack

Question

I'm creating a large scale application with amazing Vue and Webpack. I don't want to have .vue files since I want to separate them to something like comp.js, comp.pug and comp.styl

my comp.js will be:

export default {
    template: require('./comp.pug'),
    data: () => {
        return {
            compStyle: require('./comp.styl');
            message: 'Hello World!'
        }
    // ...
    },
}

my com.pug will be:

div#comp(v-bind:style="compStyle")
    h1.heading {{ message }}

And finally my comp.styl will be:

.heading
    color: #6E6E6E;
    background-color: #E6E6E6
    text-align: center

In first glance everything seems fine till I try using VueRouter and of course elements like <router-link /> or <router-view />!

Since I wont have any .vue file, I'd assume having alias: { 'vue$': 'vue/dist/vue.common.js' } in Webpack wont help me!

How can I overcome this issue?

BTW, that the error I get in the console is:

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Update

Worth to mention that I have two entry files: One for whole application

import MainComp from './comp/main';

Vue.use(VueRouter);

new Vue(MainComp).$mount('#app');

And one for components (sub components are as above):

import Router from './route';
import SubComp1 from './sub1.comp'
import SubComp2 from './sub2.comp'

export default {
  template: require('./main.pug'),
  router: Router,
  components: {
    SubComp1,
    SubComp2
  }
}

My main.pug:

div
    | here goes the views
    router-view

And here is my route.js:

export const Router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/three', component: SubComp3 },
    { path: '/Four', component: SubComp4 },
    { path: '/', redirect: '/' }
  ]
})

So when I have alias: { 'vue$': 'vue/dist/vue.common.js' } added to my webpack, error(s) will be something else:

[Vue warn]: Error when rendering root instance

Uncaught TypeError: Cannot read property 'matched' of undefined

Alex Shtorov · Accepted Answer · 2016-12-14 15:16:24Z

1

component.vue (with vue-loader):

<style src='./style.styl'></style>
<template src='./template.pug'></template>

Make sure, that loaders for *.styl, *.pug exist.

UPDATE: I'm forget, than you can do it like this (without vue-loader): component.js

import './style.styl'
import tmpl from './template.pug' // may be it will work

// if import doesn't work, then do it with string variable in this file or import
const tmpl = `
   h1 Hello world
`

export default {
   template: tmpl,
   data() {
      return {}
   }
}

edited Dec 14, 2016 at 15:16

answered Dec 13, 2016 at 17:50

Alex Shtorov

2361 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

borna Over a year ago

Thanks for your answer Alex! As I also commented out for Carig, for now I'd rather to don't go with the src imports as still need to add .vue files, vue-loader and etc :)

Alex Shtorov Over a year ago

Just use vue-cli and forget about pain. Command: vue init webpack project_name. Link: github.com/vuejs/vue-cli

borna Over a year ago

Thanks for the comment! I did use the vue-cli and tried out almost all templates! Still all of them provide .vue files... Also thanks for the updated answer. That's already what I'm doing with some minor changes, but still have the issue... Decided to make some major changes there :) Thanks again

craig_h · Accepted Answer · 2016-12-13 15:41:51Z

0

Vue-loader compiles .vue files into render functions, if you are not using them then you are going to need to use the standalone-build which includes the template compiler. As far as I'm aware that is the only difference between the runtime and standalone builds, so I see no reason why using the alias for the standalone build would not work in your case.

Incidentally, .vue files can be split into multiple files. Take a look at the src imports section on this page, to see if it's something that would suit the requirements of your project

answered Dec 13, 2016 at 15:41

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

1 Comment

borna Over a year ago

Thanks for your answer @craig_h! For now I'd rather to don't go with the src imports as still need to add .vues, vue-loader and etc! I Have updated my question... Maybe you have answer for the updated version as well

Collectives™ on Stack Overflow

Separating script, style and template in Vue.js and Webpack

Update

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related