My app doesn't compile after Vue CLI 2 to 3 update - vue.js

I get the following error since I switched from Vue CLI version 2 to 3:
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.
Here's how I instantiate Vue:
new Vue({
el: '#app',
store,
router,
components: {
UserStatus
},
data: {
isLoading: true
}
})
This worked with version 2, why not on version 3?
This answer proposes to import Vue's template compiler via import Vue from 'vue/dist/vue.esm.js';, however this creates issues with Vuetify, and I still don't understand why there's any need to import the template compiler if version 2 didn't need to.
Just in case here's the content of my index.html. Also here's my app's entire codebase.
As a reminder here's the out-of-the-box way of instantiating the main Vue instance, which is inadequate for me because it overrides whatever I manually wrote inside the <div id="app"> element in my index.html, and also involves an App.vue component which I actually don't have or want to have:
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')


The project seems to be missing quite a few dependencies related to vue cli 3. I forked your repo and brought package.json up to speed with a fresh install as well as aliased the runtime + compiler build of Vue.
Everything compiled and the console was clear of any errors related to compiling templates. The page never loaded, however, which I suspect is due to Firebase credentials missing.
You can find my updated fork here on GitHub. Hope it helps!


I also faced this issue and I got it working by creating a vue.config.js file at my project's root directory and wrote the following code in it.
module.exports = {
runtimeCompiler: true,
};

Related

How to prevent caching variable from js file in NuxtJS

Please help me to find right solution. I have NuxtJS project, there is a file structure as follows:
.nuxt
assets
components
dist
layouts
middleware
mixins
node_modules
pages
plugins
static
store
utils
versions
There is the folder versions where I store files for app versions:
app-version.js
update-version.js
versions-log.txt
I export version value from app-version.js:
exports.APP_VERSION = '1.1.0.0';
And then import it in Vue component to show it in UI
<span>{{ version }}</span>
...
<script>
...
import {APP_VERSION} from '~/versions/app-version';
...
computed: {
version() {
return APP_VERSION;
}
}
</script>
The problem is that sometimes app version is incorrect in UI, I think that it is saved in cache. After clearing cache of browser it is OK.
I don't understand why there is the problem. I thought that Vue must handle with it and prevent caching data. Maybe I need hashing js file with version variable, but I don't know how to do it.
Can anyone help me? I would be greatefull for any advise.

[Vue warn]: $attrs is readonly. $listeners is readonly [duplicate]

I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.
<div class="chat-container clearfix" id="chat">
<div class="people-list" id="people-list">
<chatlist-component></chatlist-component>
</div>
<div class="chat">
<router-view></router-view>
</div>
</div>
chat list component will load friend list from the server. Here is my app.js file;
Vue.use(VueRouter)
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
import ChatComponent from './components/ChatComponent';
const routes = [
{ path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
];
Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
const app = new Vue({
el: '#chat',
router
});
And Chat list component template code
<li class="clearfix" v-for="user in users">
<img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
<router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
<div class="name">{{user.name}}</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</router-link>
</li>
It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.
app.js:19302 [Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
Thanks in advance

First, these errors only come out in non-production builds, however they indicate a problem that should be resolved before production release.
The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded. As I understand it, this can happen usually for one these reasons:
it is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
it is being loaded by something you include (e.g. vuetify, vue-test-utils, vue-cli-electron-builder) one way and by your webpack config another way (e.g. absolute vs relative paths, common.js vs esm.js vue files, runtime-only vue vs compiler+runtime vue)
If you click on that line (it was app.js:19302 in your output above) and put a breakpoint where the message is coming out, you can see the list of modules in the stack traceback to see if there's more than one path to Vue listed. For example, see that the top three modules have a different path below (but are all part of Vue):
If you see Vue showing up in two or more different ways, it demonstrates that more than one instance of Vue is loaded. Vue only supports a single instance, and can produce these error messages if more than one is loaded.
There are several links to issues included above, the Vuetify issue was the one I filed. In that case, Vuetify requires Vue and was loading it differently than I was. Usually the fix is to check your webpack config where Vue is specified (or isn't) and try to make it match the way the other copy is being included (e.g. absolute vs relative path, or packed vs external).

This error was happening to me because I was using Git submodules in my project and I had the following folders:
./node_modules - this is for the main project. There was vue installed in these node_modules.
./my_git_submodules/vue_design_system/node_modules - design system that provides basic components (also uses vue). Vue was also installed here!!
So because both:
./node_modules/vue and
./my_git_submodules/vue_design_system/node_modules/vue
existed, running npm run serve (vue-cli-service build underneath) built two instances of Vue. This was
a really nasty issue because it broke reactivity in certain cases
(ie. you click a button and nothing happens - you just get the
$listeners readonly error)
Quick fix:
removing node_modules in the child folder (vue_design_system) and running npm run serve worked for me.
Long term fix:
you'll probably need to make Webpack ignore nested node_modules folders by adding a rule in vue.config.js

Adding this to vue.config.js, worked for me.
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}

I faced the same problem. For me, as I installed a local module using
yarn add ../somemodule --force
Seems this command will copy the whole module directory include the node_modules sub-directory. That causes the duplication of the same version of "vue" module. And in the browser devtool I can see multiple sources of the module.
For me, the solution is manually to delete the node_modules every time after install the local module.

In my case, I was migrating from a project that didn't use VueCLI. In that project, I imported vue from a CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. In my Vue CLI project, I had copied and pasted my whole index.html file to the Public folder. Vue CLI has it's own way of importing vue so they were clashing. I simply removed the script and the problem was solved.

I had the same problem as above. I am using git submodules and I used
yarn add ./submodule
Somehow there ended up being a node_modules directory in the ./submodule directory and that confused everything.
And it was loading two Vue instances.

This can also happen because you are using npm link to use your unpublished vue packages. Basically identical to #walnut_salami explanation.
The fix for this problem is by moving to this way of including unpublished modules.

Looks like as if there are many possible answers.
I added a npm package manually to the node folder and the problem was the missing npm i command. After using the install command, everything worked fine.

In my case, this error arose after module federating my components.
I solved it by sharing vue in the component receiver to the component supplier.
e.g
webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "dashboard",
remotes: {
web_common: "web_common#http://localhost:8081/remoteEntry.js"
},
shared: {
vue: { // this solved my issue.
eager: true,
singleton: true,
requiredVersion: deps.vue
},
}
}),
]
}

Vue components not rendering when #nuxtjs/storybook is used in a Vue Storefront Next project - possibly a Typescript issue?

I am trying to use #nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) project.
I can get Storybook to open and to show stories, but the component within the stories are not rendered. For example, if I try and use the example from https://storybook.nuxtjs.org/usage then I see a <link> element in devtools (the name of the Vue component), not a rendered <a> element (the content of the Vue component):
I then switched to trying to use another simple component:
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue
https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js
But that doesn't work either, you can see an example of that here: https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo (I had trouble getting Storybook to work on Codesandbox).
Vue Storefront Next is based on Nuxt but I had to make a few changes to get Storybook to open:
Update the build section within nuxt.config.js:
babel: {
presets({ envName }) {
return [
[
'#nuxt/babel-preset-app',
{
corejs: { version: 3 }
}
]
]
},
ignore: [/[\/\\]core-js/, /#babel[\/\\]runtime/],
},
install #babel/runtime-corejs3, core-js 3, and ts-node
ts-node was necessary because Vue Storefront Next provides a tsconfig.json file for development of part of the project, and that makes #nuxtjs/storybook module think the project is a Typescript project (https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76), but the Vue Storefront project does not use #nuxt/typescript-runtime - I am wondering if this is part of the problem?
You can see the package.json content on Codesandbox: https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json
Any clues as to how to fix this issue would be SUPER appreciated, thank you! I've spent the best part of a day on this but I don't know enough about Storybook or Nuxt to be able to debug it myself, unfortunately :(

It turns out that the #nuxtjs/storybook module seems to be dependent on components: true being set in the project's nuxt.config.js file.
This isn't mentioned anywhere in the #nuxtjs/storybook documentation, but I've raised a Github issue to point this out and will raise a PR against the docs if the maintainer agrees.
You can see my thought process behind how I discovered this issue in this Github thread: https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558

integrate vue js with asp.net core 2.1

Can someone help with explaining how I can use vue.js with asp.net core 2.1.
ideally i'd just like to hit f5 in visual studio 2017 and the website load.
i know ms previously had spa templates but they seem to have been abandoned. theres a starter template on github too but that is using .net core 2.0.

I am trying to use Vue.js with MVC Core 2.1 for a multi page application at the moment, and have found a working solution.
I see you mention SPA though, my answer will be for Multi page apps, but some of the ideas may apply.
My approach
I've created a main.js file in wwwroot/resources/js/ and a components subfolder within that directory - and also a layout folder in the components one.
In the main.js I create a Vue instance and attach it to #app root element in the HTML. In this js file, I also register most of the components globablly, unless they are only needed for specific components. My main.js looks something like this:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import Axios from 'axios';
import BaseLayout from './components/layout/BaseLayout.vue';
window.axios = Axios;
Vue.component("base-layout", BaseLayout);
new Vue({
el: "#App"
});
In the _layout.cshtml file I have the following (relevant content):
# Views/Shared/_Layout.cshtml
<div id="App">
<base-layout>
#RenderBody()
</base-layout>
</div>
<script src="~/resources/js/bundle.js"></script>
If you are only interested in SPA - I would probably do something like:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: "#app",
render: (h) => h(App)
});
# wwwroot/resources/js/App.vue
<template>
<div id="app">
<-- Use other components here -->
</div>
</template>
<script>
export default {
name: "app",
data: function() {
return {
// What evs
}
}
}
</script>

VueJs (along with Angular and ReactJs) was available at one stage from the new project but was removed later on because of limited maintainers. However you can still create a VueJs app via command line. Run dotnet new -l to see the list of available dotnet templates.
if you don't see vuejs in the list, install the templates
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Once you create the web app, and open it in the VS you should be able to run it like any other project, by hitting F5.
There are a few good resources online :
Asp.NETCore 2.1 Vue 2 Starter - by DevHelp.Online
Creating a VueJS (with TypeScript) SPA on ASP.Net Core 2.1
Second link mentions that vuejs template is still available via command line.
Also i found this series very informative, explains from setting up to deployment.
https://code-maze.com/net-core-series/

If you are building a multi-page application, you can take a look at this template as an example or starting point.
https://github.com/danijelh/aspnetcore-vue-typescript-template
If you're building an SPA, consider splitting your API from your UI and use Vue CLI 3 for the UI part.

Nuxt error : Unknown custom element

I am using nuxt js. I am trying to install a vue package vue-zoom. Actually few more plugins.
{ src: '~/plugins/zoom', ssr: false },
Here I kept ssr false because it gives errors like document is not defined...
In my plugins/zoom.js file I have this
import Vue from 'vue';
import vZoom from 'vue-zoom'
Vue.use(vZoom);
Now when I am trying to use this plugin like this
<v-zoom :img="`/uploads/${displayImg}`" ></v-zoom>
It gives me the above error.
Any reason or thought how can I use this plugin or similar in nuxt js?
I tried few more all gives similar errors.
Thank you

I got the same error when having the buildDir set to my functions/.nuxt folder, which I was using for SSR via Firebase Functions. I was able to solve the issue by making sure neither nuxt nor vue was installed in the node_modules inside the functions folder.
Are you using a similar setup by chance?