getting runtime-only build

[raulcesar]

Hi. Great looking package here. I'm trying to use it in a vue app, but when I include the component in my App.vue, I get a warning saying:

"you are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."
found in ---> <Snotify> ...

In my main.js, i have:

import {Snotify} from 'vue-snotify';
Vue.use(Snotify)

And in App.vue, I put in:

<template>
  <div>
    <vue-snotify></vue-snotify>
    <div class="conteudo">
      <main>
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>

Any ideas on what I may be doing wrong?

[artemsky]

the issue is that you're using runtime only package.
Snotify package needs to compile templates on the fly.

[raulcesar]

Thanks for the speedy reply.

[arenddeboer]

Is this due to a change in the 3.0 code ?
I got this error after updating from 2.x and do not fully understand why I now need to include the runtime+compiler version. Or was it always needed and did something else change on my end.

[artemsky]

I jumped from *.vue to template string. - https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Maybe I was wrong.
I'll think about...maybe i should jump back

[arenddeboer]

Thanks. I don't know enough of Vue to give any advice, other than the downside of the added size if you include the compiler.

For others having this issue, I was able to get going again with this change in Webpack:

resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  }

Thanks for an awesome package.

[pschaub]

I have the same issue here and would like to use vue-snotify with runtime-only builds.
@artemsky Please add support for vue runtime-only builds.

[artemsky]

working on this.

[pschaub]

@artemsky Thanks. We really need this. It's the only reason why we currently don't use vue-snotify on some projects.

[gpuma]

@arenddeboer I used your fix and it's working properly now. Could you please explain what does that line of code do?

Also, thank you @artemsky for the great package

[arenddeboer]

@gpuma have a look at the docs here: https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds it has a section about the different builds and how to include them in webpack

[mbajur]

Any luck with this ? :)

[erodewald]

I'm new to Vue, and this doesn't seem to work out of the box with my vue-cli 3 template. @artemsky maybe the project needs to be updated to support it? Just thinking out loud, as I have not yet found a good solution for it that doesn't include providing webpack resolve aliases for pretty much everything. Compilation fails otherwise.

edit:
I was able to get it working fine, but only if I used the chainWebpack to set the alias in vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set("vue$", "vue/dist/vue.esm.js");
  }
};

[focussing]

Please help!

Cannot get it to work either. I use a Vue-cli3 project.
This is my App.js code. For testing I put a notify.success in the created hook.
In one component which is loaded via the router, I am calling notify.success as well via a button.
The only thing in both cases is that the 'Example body content' text is shown in a line, and not as a notification. Also the text is not removed.

What am I doing wrong?

<template>
<div id="app" class="text-blue">
    <vue-snotify></vue-snotify>
    <Navbar></Navbar>
    <router-view/>
</div>
</template>

<script>
import 'babel-polyfill'

import Navbar from './components/Navbar.vue'

import Vue from 'vue'
import Snotify from 'vue-snotify'; // 1. Import Snotify
Vue.use(Snotify)

export default {
    name: 'app',
    components: {
        Navbar
    },

    created() {
        console.clear();
        this.$snotify.success('Example body content');
    }
}
</script>

I tried all fixes, the only thing that is happening is

[artemsky]

@focussing Pls, include styles .https://github.com/artemsky/vue-snotify/blob/master/docs/essentials/styling.md

[artemsky]

Runtime build ready

[focussing]

@artemsky thank you... missed that completely...

Are you going to make a new release? Or, how can I update to get the runtime?

[irjayjay]

Same as @erodewald, if using the vue.config.js, you can also add it to the configureWebpack object as follows(this took me forever to find):

EXAMPLE:

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
    },
}

[focussing]

If you use the NPM way of importing vue-snotify, then the vue.config.js addition is not needed.
Tried that with version 3.2.0.

[AliBedaer]

i have the same issue how to fix it getting this error when run

npm run build

i get this error

Unexpected token: name (code) [./node_modules/vue-snotify/vue-snotify.esm.js:104,0][build.js:12619,12]

[ayelen117]

@focussing I added import 'vue-snotify/styles/material.css' and worked.

[metrey]

Still got this issue even with v3.2.1

ERROR in static/js/vendor.js from UglifyJs Unexpected token: name (code) [./node_modules/vue-snotify/vue-snotify.esm.js:104,0][static/js/vendor.js:27544,12]

[arenddeboer]

Unexpected token errors from uglify come from uglifyjs not understanding es6. You need to transpile to es5 for uglify to be able to work. Depending on your build you can do this with babel, make sure you don't exclude node_modules/vue-snotify from babel transpilation.