CODEWITHSUNDEEP
gulpbrowserifyvue.js
Brian Coolidge
Brian Coolidge

Reputation: 4649

Gulp Vue JS not compiling conflict on style tag

I'm trying to compile vue component using gulp and browserify. I'm using vueify to suit my needs.

Here's my code looks like.

Vue.config.delimiters = ['${', '}'];

<style>
    .layout-wrapper { width: ${ canvas.test }; }
</style>

module.exports = {
    props: ['theme_id'],
    data: function() {
        return {
            canvas: {
                test: '12345px',
                content: {},

The problem is, it's not compiling. But when I tried

    .layout-wrapper { width: ${ '12345px' }; }

It does worked though. Is there a problem calling the data object?

Upvotes: 1

Views: 167

Answers (1)

Jeff
Jeff

Reputation: 25221

Look at the example .vue file in the documentation:

https://vuejs.org/guide/application.html#Single-File-Components

The format should be:

<style>

</style>
<template>

</template>
<script>
  module.exports = {

  }
</script>

There is also not a way to use Vue variables in the style section. You need to use them inline in the template:

<div :style="{width:canvas.test}">

If you want to use a different language in the style section add a lang attribute. That can enable you to use variables if you know any other css languages:

<style lang="scss">
  $canvaswidth = '123px';
  .layout-wrapper {width: $canvaswidth}

Upvotes: 1

Related Questions