Questions tagged [vue.js]
Vue.js is an open-source, progressive JavaScript framework for building user interfaces that aims to be incrementally adoptable. Vue.js is mainly used for front-end development and requires an intermediate level of HTML and CSS. Vue.js questions are highly version specific and should always be tagged with [vuejs2] or [vuejs3] in addition to this tag.
vue.js
39,913
questions with no upvoted or accepted answers
20
votes
2
answers
6k
views
Vuetify performance issues
I have picked vuetify for an offline PWA project where I work with indexed DB and some notable size data (5k-6k/collection). I have to transfer it between vuex and IDB after I get them from the server....
- 314
17
votes
1
answer
2k
views
Deploying Vue/Nuxt app to Firebase as Universal App with SSR
I'm trying to deploy my Universal Nuxt.js app to Firebase. All information on doing this appears to be out-dated, and I'm not able to get it fully working.
SSR appears to work, along with static ...
user5589998
16
votes
1
answer
6k
views
How to authenticate Nuxt on server side?
I have spent the night looking for solutions to this issue, it seems like a lot of people have it and the best advice is often "just switch to SPA mode", which is not an option for me.
I ...
- 645
16
votes
2
answers
3k
views
How to remove Stripe's iframes?
I'm using Stripe Elements with vue-stripe-elements-plus on internal single page app. As there is no need to keep the stripe code running after user leaves change credit card module I want to unload ...
- 4,415
15
votes
0
answers
12k
views
[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <div>
I am using the calendar component of Vuetify, it is showing the data properly, however I get that warning in console, it's a bit annoying and i don't know what's wrong since most of the code is a copy ...
- 992
14
votes
4
answers
8k
views
Looking for an Angular 7 version of Vue.js "nextTick"
I'm developing a page in Angular 7, where i want to do something (scroll to section) after i'm sure the page has re rendered. The section i want to scroll to is initially hidden with an ngif and when ...
- 141
12
votes
0
answers
6k
views
Single SPA + Vite - Cannot use import statement outside a module
I am using Typescript + Vite + Single SPA
Just trying to replicate the https://github.com/joeldenning/vite-single-spa-example
and https://github.com/joeldenning/vite-single-spa-root-config.
Hence, in ...
- 1,005
12
votes
1
answer
4k
views
Init pinia state
We use pinia to manage app state. As it's mentioned in title, I'm looking for NuxtServerInit hook analogue for pinia.
A little context: User lands on First page of form; Form calls (f.e.) state....
- 3,216
12
votes
1
answer
3k
views
couldn't parse bundle asset chunk-vendors.js
I created a project using vue ui. When I clicked the serve button, it's ended with an error. I can't open the app I have created. The error is:
Couldn't parse bundle asset "{path}\dist\js\chunk-...
- 329
12
votes
3
answers
4k
views
VueJS and Firebase, history mode 404 error when refresh
I removed the hashbang in the link with history mode in my router file.
Now when I refresh a page I got the 404 error.
I tried to follow this link
then, I added the part in firebase.json :
{
"...
- 201
11
votes
0
answers
959
views
How to get TypeScript errors to match original line number in Vue + TS + Webpack project
So I've set up a Vue project with Webpack, then I installed the proper loaders and moved to TypeScript inside my SFCs. It's all running good, except that the TS errors caught during build time are ...
- 111
10
votes
1
answer
6k
views
Vue3/Vite/Vuetify 3 Build Error: Variable was not declared with !default in the @used module
I am attempting to implement SASS Variables in Vue 3, Vuetify 3, Vite build and am encountering an error about variables not being declared with !default
I followed the instructions in the Vuetify 3 ...
- 121
10
votes
1
answer
1k
views
Nuxt with Vuetify theme styles in head section
I'm using Vuetify with Nuxt.js and I have chunked out my css files so that when I use npm run generate all my my styles aren't included in every page on my site. To acheive doing this, iv'e added....
...
- 2,595
10
votes
0
answers
2k
views
Debugging Nuxt.js application (client side) with Chrome developer console
When I'm trying to debug a Nuxt.js application (the client side code, not the server side) in Chrome, I'm finding that breakpoints aren't being hit when I expect them to be.
in nuxt.config.js I have ...
- 1,835
10
votes
2
answers
2k
views
Best practice for multiple Vue instances/apps in Laravel
What I want to create is a web application with Laravel Lumen and VueJS, where Laravel Lumen is used for an API and VueJS for a SPA. In the application I want an admin section, a small forum and the ...
- 121
10
votes
2
answers
3k
views
How to run Vue-cli project using https on Windows
I am trying to run a vue-cli project using https.
As per the instructions here How to run Vue.js dev serve with https?
I've added the https setting to the vue.config.js as per below:
module.exports = {...
- 2,773
10
votes
1
answer
6k
views
remove trailing slash in Vue Router
const routes = [
{
path: '/:year',
component: Nav,
children: [
{ path: '', name: 'test', component: Test }
]
}
];
<!-- /2018/ -->
<router-link :to="{name: 'test', ...
- 163
10
votes
0
answers
703
views
Can we stop Vue from performing Client Side Hydration for a specific component?
I am fairly new to Vue and we are facing a problem where the total DOM size for our page has increased because we are storing a lot of data in DOM config for Vue client side hydration. For SEO ...
- 226
10
votes
1
answer
2k
views
Dynamically add global constant in webpack
I'm trying to add a global constant to my project. For this I use webpack.DefinePlugin. This works if I add one in the module.exports. I fail to do this conditionally however. In the config below I'm ...
- 999
10
votes
1
answer
4k
views
webpack build css rules have different order then in development
I am not sure if this is a webpack issue, vue-loader for webpack issue or just something that I am doing wrong.
When I am running npm run build to build a distribution for my Vue.js application the ...
- 10.8k
10
votes
1
answer
14k
views
Vuetify v-data-table - how to make it fill the available height?
I am using Vue.js and Vuetify.
I have a page with various sections that contain configurable items for the user.
The layout is a 2x2, so there are two items per row, and 2 rows.
One of the items ...
- 161
10
votes
2
answers
1k
views
How to initialise Vuelidate 2.0.0 when testing a Vue component with Vitest?
In my Vue 2.7.14 app I'm using Vuelidate 2.0.0. I'm trying to migrate a test from Jest to Vitest, but the v$ object is not initialised correctly in the latter case. The component has a checkbox bound ...
- 186k
10
votes
2
answers
10k
views
How do I fix the npm WARN deprecated error when I install VueJS CLI
I'm trying to install VueJS CLI on my Windows 10 machine but ran into the errors below:
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/...
- 639
9
votes
1
answer
773
views
How to disable Safari's Live Text in my website?
I am making a Vue application and in the navbar I have a logo that when you click it, it sends you to the home page.
The logo is a .svg with the name of site, which has two lines. Lets say the website ...
- 91
9
votes
0
answers
3k
views
ESLint 'The extension for the file (.vue) is non-standard' error
When run eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore . script using npm run lint, the following error occurs.
/(somethingSomething...)/Test.vue
0:0 error Parsing error: "...
- 571
9
votes
2
answers
637
views
Creating component programmatically in Nuxt.js
I'm trying to create a nuxt.js component programmatically. I tried the approach below which works in Vue. But it doesn't seem to work in nuxt.js because it instantiates the component on the Vue object....
- 641
9
votes
1
answer
2k
views
VSCode with Vue CTRL+Click go to definition not working inside HTML from vue file
I am using VSCode with all Vue extensions needed (including Vetur, which should be responsible for go to definitions) and whenever i am in a .vue filetype, i cannot hit CTRL+Click to go to definion of ...
- 473
9
votes
0
answers
4k
views
Nuxt.js: How to debug server side after nuxt build (logging some information)
I am using nuxt.js for my frontend app. I currently have a problem with asyncData especially the first time it is run (which is on the server).
When building my app ($ nuxt build and serving it via $ ...
- 4,452
9
votes
0
answers
968
views
Exclude files form webpack in nuxt
I've added some file to my nuxt project. The files are stored in the ./content directory. Now we got some warnings like the following one:
WARN in ./content/config.yml
Module parse failed: ...
- 4,077
9
votes
0
answers
1k
views
Add Generic Type to Component in vue.js with Typescript
I have a Component in Vue which has a specific set of data. The data is always defined by an Interface in typescript. At this moment, I keep the info about the selected items out of the DataTable ...
9
votes
0
answers
3k
views
How do I test a vue component that contains a v-text-field Vuetify child component?
I have an "EditableText" component that displays regular text that when clicked converts into a vuetify v-text-input component (kind of like trello's functionality when you edit the title of a card).
...
- 541
9
votes
0
answers
2k
views
Vue CLI 3: Sourcemaps cannot be parsed by Chrome devtools
I built my simple site using Vue UI (the ones that comes with Vue-CLI 3), and it created sourcemaps in the /dist folder. I deploy these sourcemaps along with the production files. When I load up my ...
- 2,530
9
votes
0
answers
2k
views
Nuxt auth-module google login promise on success
I am using Nuxt with the auth-module.
Logging in to Google works:
this.$auth.loginWith("google").then(() => {
console.log("Logged in!");
});
Here is my google login strategy:
google: {
...
- 539
9
votes
0
answers
2k
views
How to build a es6 vue-component library using vue-class-component
I am trying to create a vuejs component library in typescript with vue-class-component and vue-property-decorator with the following requirements:
The library components should be written in class-...
- 896
9
votes
1
answer
3k
views
Vue Cli 3 and Firebase service worker registration
I've used Vue-cli 3 to create a Vue app and I've been trying to incorporate FCM into it. However, I've been working on it for two days and I still cannot get it working.
First, here's my
...
- 4,418
9
votes
1
answer
5k
views
vue-cli 3.0 ./src/main.js in multi (webpack)-dev-server/client?http://10.0.68.112:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Project requirements, The main.js file is not in the src root directory, and then run vue-cli-service serve has the following error
* ./src/main.js in multi (webpack)-dev-server/client?http://10....
- 91
9
votes
4
answers
2k
views
Why does Apollo/GraphQL return a non extensible object?
I'm building an app with VueJS and I'm using Apollo client to fetch data from a database through a GrapgQL server. I have code that looks like this:
apollo.query({
query,
...
- 237
9
votes
2
answers
8k
views
Why Proxy not working in browser (NuxtJS+Axios)?
In server rendering Proxy is working fine. Request is going to custom-server.com/v1/places. But in browser request is going to current-domain.com/api/places
Why it is not working in browser? Proxy ...
- 91
9
votes
1
answer
881
views
Vue SSR (Server Side Rendering) with parcel?
I am wondering whether anyone can point me to resources or examples on how to set up parcel for vue SSR (Server Side Rendering).
Or is Vue SSR not possible with parcel?
- 4,344
8
votes
0
answers
2k
views
Why doesn't Vue 3 remove template comments from DOM in production?
According to Vue docs, it should remove HTML comments when building for production.
However, for me that's not the case. All <!-- comments --> are still visible in DOM through devtools in ...
- 711
8
votes
0
answers
2k
views
Vue 3 - How to disable adding trailing slash?
Problem statement : Vue app changes the URL after loading the scripts and adds a slash to the end. This only happens for routes where the path matches /.
I have the server configured like this :
/game(...
- 81
8
votes
1
answer
566
views
Adding VUE js to an existing Electron App
I have an existing Electron APP with hand coded HTML all over the place and a lot of copy pasted code.
I would like to slowly integrate VUE to reduce the copy pasted components.
All the articles I ...
8
votes
0
answers
1k
views
Vue + axios does not save session cookies
In dev mode (express on localhost:4000, vue on localhost:8080) works fine, all cookies saving correct. In production mode i change cors settings and axios.defaults.baseURL, and... client dont save ...
- 81
8
votes
2
answers
3k
views
Inject CSS styles inside of the shadow-root instead of the head tag | Vue.js & Webpack
I'm making an embeddable widget for websites using Vue.js and vue-custom-element. Everything was going smoothly until I ran into a problem.
When I'm trying to use a component (with css) from a package....
- 717
8
votes
0
answers
2k
views
Using SendGrid with Nuxt.js
This post is not a question actually.
More like help to the world for people who are struggling with Nuxt.js and SendGrid.
I've been using stackoverflow for such a long time so maybe now it's my turn ...
8
votes
1
answer
1k
views
Passing Named Slot to Child Component
Due to some server side rendering, I'd like to be able to pass a named slot from a parent component into a child component, but I'm not sure the correct mechanism. I'm able to get the top level ...
- 3,683
8
votes
1
answer
8k
views
VueJS bcrypt implementation
I am a bit confused about bcrypt usage in VueJS ...
I am working on a sample application with VueJS as FE and NodeJS as BE (+ Postgres as the DB).
In NodeJs, there is no problem for me to encrypt the ...
- 1,313
8
votes
1
answer
3k
views
VueJs: TypeError: Object(...) is not a function, "withScopeId"
We've been pushing updates successfully to our Vue applications in recent weeks and after some very minimal changes yesterday (property name changes and removing some purely semantic characters) we ...
- 7,897
8
votes
1
answer
8k
views
import TS file to Vue file
I've made a ts file with an enum and interface, and I need to use them in Vue components. However, when I try to import the ts file into my Vue components, I get an error that says it can't find the ...
- 329
8
votes
0
answers
6k
views
Vuetify horizontally align content of v-list-item
I am working on a navigation drawer with Vuetify and Vue.js.
I am dynamically generating the list items in this drawer.
Each list item consists of an icon, a name and a delete icon.
So far ...
- 505