Questions tagged [vue-cli-3]

1

votes
1

answer
101

Views

Vue CLI 3 prevent cache busting for certain output files

I'm building a chrome extension with vue cli 3. I've got the basics working well, but I was hoping to also run my content and background javascript through the build process instead of just putting them into my public folder and copying it into dist. This is mostly just so I can use import/export...
Will P.
0

votes
1

answer
11

Views

Vue cli 3 project alias src to @ or ~/ not working

I have installed the project with vue cli 3 but as the project grows, the import on the components are getting ugly, i end up importing a component like import Component from '../../../../components/folder/Component.vue' i just want to alias the src folder and do import Component from '@components/f...
Carlos Salazar
5

votes
1

answer
26

Views

How to sync states between backend and frontend using vuex and vue-router?

I am developing a single-page-application using vue-cli3 and npm. The problem: Populating a basic integer value (stored in a vuex state) named counter which was incremented/decremented in the backend to the frontend, which displays the new value. The increment/decrement mutations are working fine on...
sebikolon
0

votes
0

answer
2

Views

Cannot find module '@babel/preset-env/data/built-ins.json'

I don't know what I gonna do. My project is not running anymore. I did something to work it again. But still it's giving same error. Please help. C:\projects\management>npm run serve > [email protected] serve C:\projects\management > vue-cli-service serve INFO Starting development server... 98% after emitt...
Yasin Yörük
1

votes
1

answer
17

Views

How can I deploy a Vue app into a subdirectory?

I've got a somewhat involved build pipeline... I am using a static site generator to build my site. This deploys to a 'public' directory and is generating the stub inside of an index.html in a generated folder, test. For example: mysite/public/test/index.html (contains the div stub for the app). Ho...
Cliff
-2

votes
2

answer
74

Views

Combining Express 4 and Vue CLI 3

I built a project with Vue CLI 3 and Express 4 and this went straight forward so far, as I had the backend server in one folder and the frontend in another, but now I'm coming to a halt trying to deploy both on a single Node hosting service. Let me tell more in a bit. My project structure so far: Pr...
Fusseldieb
0

votes
0

answer
4

Views

How to properly use slot inside of vue js web component and apply styles

I have come across an issue where the implementation of slots in a webcomponent is not functioning as expected. My understanding of Web Components, Custom Elements and Slots is that elements rendered in a slot should inherit their style from the document and not the Shadow DOM however the element in...
Adam H
1

votes
0

answer
9

Views

How to use VueJS axios-oauth-client and google photos api?

I'm using vue cli and I try to get album list from my google photos account. I'm using axios-oauth-client and I try to implement this code: const axios = require('axios'); const oauth = require('axios-oauth-client'); const getAuthorizationCode = oauth.client(axios.create(), { url: 'https://oauth.com...
Tamir Gilany
1

votes
2

answer
390

Views

Vue-cli3 vue-cli-service build --modern doesn't work

After npm run build --modern runs successfully, I only see one app in the output. Shouldn't there be two?
Joe
1

votes
1

answer
862

Views

Specify a vue-cli vue.config.js location

I have a vue.config.js file in my project's base directory. I'd like to move this next to my other config files in a /config/ folder. How can I specify the new location of this file for vue-cli?
iRyanBell
1

votes
1

answer
151

Views

How can I stop vue cli3 build from including vue.js.min in my chunk-vendors.js file?

I'm starting from scratch and using the default create project from vue using cli 3. Everything is fine, however I noticed the chunk-vendors.js file contains vue.js.min. I don't want to include that file, how do I tell the vue to not include it in production builds?
Craig
1

votes
2

answer
691

Views

How to handle 404 error request in vuejs SPA with nginx server

I have set up my vue-cli version 3 SPA so that any requests not found in my routes.js file will default to my 404 view as shown in the official documentation: Inserted near bottom of routes.js file: { // catches 404 errors path: '*', name: '404', component: () => import(/* webpackChunkName: 'NotFoun...
GustavMahler
1

votes
1

answer
565

Views

Why getting ERR_CONNECTION_TIMED_OUT in VUEJS

After create a new project with vue cli 3 i get this error. GET http://192.168.1.13:8080/sockjs-node/info?t=1538257166715 net::ERR_CONNECTION_TIMED_OUT sockjs.js?9be2:1605 Operation system:Windows 10
g miou
1

votes
1

answer
672

Views

How do I disable Hot Module Replacement with vue-cli-service serve?

Whenever I run vue-cli-service serve and try to hit the site, I get Uncaught Error: [HMR] Hot Module Replacement is disabled. in my browser. What's causing this error? I don't want HMR enabled.
Chris B.
1

votes
1

answer
65

Views

why openlayers map not working in vue-cli 3

I have added ol package to my vue-cli project through npm install ol but the map doesn't load. there is no error and I just find an empty div in the result source. here is my code => the html part : the js part : import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileL...
Mostafa Shakoori
1

votes
1

answer
327

Views

How to debug Vue CLI 3 unit tests with WebStorm? Debugger doesn't hit breakpoint

Question What do I have to do to make WebStorm hit the breakpoint? Is it necessary to set the %NODE_DEBUG_OPTION%? If yes, how do I do this in combination with vue-cli.service? Steps to reproduce: vue create myapp Set options to: ? Please pick a preset: Manually select features ? Check the features...
C-Jay
1

votes
2

answer
90

Views

How do I ensure the vuex store gets included in my build?

I have a Vue application that is using vue cli 3. I'm following the guide here to try building my app with vue-cli-service build --target wc --name my-element [entry] To test the output, I have an index.html file: Document But I'm getting the following error when opening index.html in my browser: A...
Kecoey
1

votes
1

answer
58

Views

Coffee lang in vue CLI 3

I've created project with vue create and edited default App.vue like so: import HelloWorld from './components/HelloWorld.vue' export default name: 'app' components: HelloWorld and got an error ERROR Failed to compile with 1 errors 8:39:21 PM error in ./src/App.v...
Oleg
0

votes
0

answer
3

Views

Vue2/Typescript : how to make bidirectional computed method?

I try to migrate an object based Vue2 project to a class based project. We curently use this syntax for computed : computed: { inputValue: { get() { return this.value }, set( value ) { this.$emit( 'input', value ) } } }, With class based component, the getter is like that if i understand well : valu...
jibhey
1

votes
0

answer
7

Views

Vue JS - Unit test - localstorage is not defined

I'm writing unit test for for vue cli 3 using Mocha and chai. I have tried mocking localstorage. but still getting this error - 'localStorage is not defined'. Can anyone please help me here? My code is like this - import { expect, assert } from 'chai'; import { shallowMount } from '@vue/test-utils'...
Mangesh Daundkar
0

votes
0

answer
3

Views

Vuex - Modify state objects only on getters

I have a lot of state modules with relations, here are two of my main states: channels.js const state = { channels: [ { id: 1, name: 'E-mail' }, { id: 2, name: 'SMS' } ] } const getters = { channel(state) { return (id) => { return _.find(state.channels, (channel) => { return channel.id == id }) } },...
Caio Kawasaki
1

votes
0

answer
14

Views

How to import a function from a .js file when using Typescript and Vue

I have a Vue.js project that is using Typescript and it is working well but I have an old piece of javascript with a lot of logic in it that I need to use and I would like to import it but I seem to have tried every combination of Import syntax to the .vue file and am unable to load the javascript....
0

votes
0

answer
5

Views

Sharing Vue page components between projects

I have 2 Vue applications and they both need to use some common pages. These are full pages with access to vuex store and async calls. What is the best way to share them between the projects?
Tomer
1

votes
2

answer
987

Views

How to Set Up Virtual Host for Vue CLI 3 Project

I want to be able to access my Vue project from http://pbdev instead of localhost:8080. I am familiar with creating virtual hosts in Apache, but I'm unclear on how to do this with a Vue CLI 3 project. Thus far, I have put this in /etc/hosts: # Vue Hosts 127.0.0.1:8080 pbdev And I put this in vue.co...
Clifton Labrum
0

votes
0

answer
8

Views

How to properly deploy a Vue + Apollo Server & Client app on Heroku?

I am new and have just been trying out Vue.js with Graphql. After some learning, I went and scaffold a project with vue ui(vue cli 3), added vue-cli-plugin-apollo for both the client and server so my current project structure is as follow: Project Folder ─┬── apollo-server (server folder) ...
Delonn
3

votes
1

answer
148

Views

Vue cli 3 hot reload suddenly not working in browsers

I have a Vue project generated by the Vue cli 3 and my hot reloading suddenly stopped working in my browsers. Changes made to the code are still picked up by the terminal, however, my browser is not picking up the changes. I have to manually refresh in order to pick up the new changes. As suggested...
Gilian
1

votes
3

answer
1k

Views

Vuetify Standard Setup (babel/eslint) image failed to load

I'm working on a VueJS project and am trying to load an image on a carousel. I am using the standard setup and have the image in the assets folder. I reference the image URL with But this throws an Image Load Failed error when I run the server using npm run serve. console.js?66f6:36 [Vuetify] Image...
VihanAgarwal
1

votes
1

answer
11

Views

Inform App.vue a Service-Worker Event is Being Called

I have a project created using Vue CLI 3 with Vue's PWA plugin included. I would like to display a banner prompting the user to click an in-app “Refresh” link as described here in the 'Approach #3' section. But in my Vue.js app, because the service-worker code is executed in main.js, and my snac...
Doug Allrich
2

votes
0

answer
49

Views

Vue cli 3 - NYC Istanbul code reports not including vue files

I have been trying for hours now to get the istanbul code coverage reports up and running for my new vue (typescript based) project, generated with the vue-cli v3. Whenever I run my tests: (nodemon --exec nyc vue-cli-service test:unit) only the .ts files are included, even though I have specificly s...
Stan Hurks
0

votes
0

answer
8

Views

Vue Cli: Command 'vue' not found in Ubuntu 10

I'm trying to install the latest vue cli but vue command was not found.
Warren Clarin
0

votes
0

answer
5

Views

“Parsing error: Unexpected token < …” using VueCli3 and airbnb eslint

I know this may seem like a duplicate question, I still get this type of eslint errors after trying the following: https://github.com/prettier/prettier/issues/3720 (i already installed eslint-plugin-vue) Vue.js eslint Parsing error .: unexpected token (not really related to my question, but I tried...
Leesa
3

votes
1

answer
84

Views

Vue CLI3 app, HTML srcset and sizes attributes not supported?

I am trying to use the srcset and sizes HTML attributes for responsive images to serve a certain image to a certain screen size for performance optimization and responsive design. But Vue-loader doesn't seem to support them, anyone had a similar issue? If not what could be a possible solution to bes...
MoSwilam
2

votes
1

answer
794

Views

VUE CLI-3 Project not working on IE-11

I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk On clicking console error...
Sukhpal Singh
2

votes
1

answer
95

Views

How to make test coverage show all vue files in Vue-cli 3 using jest

I am currently having difficulty trying to set up vue-cli 3/jest to show test coverage. I have done everything possible to make it work but it is still showing blank Ran all test suites. ----------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | %...
devIT
12

votes
2

answer
3.9k

Views

What is a-la-carte components? Should i use it?

When starting a new project using vue-cli it asks a few questions to customize the setup. Generally the project name, description, whether to use eslint for linting, karma and mocha for testing etc. This time it asked me ? Use a-la-carte components? I searched for it in the vue-cli docs but didn't...
Ragas
0

votes
1

answer
12

Views

How to include image in Vue Component CSS inline styles in a none relative path?

So I have this Component code Test .example-class { background-image: url('HOW to include the image here?'); } How can I include the image in that style section code? My component is in a directory src/component/sample-comp/MyComponent.vue My images are in a directory assets/images I already tried...
Yves Gonzaga
4

votes
1

answer
411

Views

Failed to Compile After Installing Vuetify with Vue CLI 3

I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage. Following is the command I used: npm install @vue/cli -g vue create my-app // all options are default settings when creating cd my-app vue add vuetify // all options are default settings when running All command...
Sean Wu
3

votes
1

answer
60

Views

How to make a video stream http GET request to img html tag with axios?

I have a Django 2.1 backend that have a video stream endpoint and a Vue-Cli3 as my frontend. The videostream endpoint in my backend is a GET request. To have the streaming working in my client side all i needed was to add: This works fine but now i have to protect my back-end route for authenticated...
Marcelo Fonseca
5

votes
2

answer
223

Views

Vue - Compile other folder outside of /src in Vue.js project

I have a regular Vue.js project (created using v3.0.3) that uses WebSockets. Also in the project root is the /server folder which has the Node.js code that houses the multi-player aspect and socket code. However, since the folder /server is independent of the /src folder from the Vue.js project, how...
nn2
5

votes
0

answer
182

Views

Vue CLI 3 does not convert vendors to ES5

We have a vue-cli 3 project. It works pretty well and compiles without problem. The fact is we have to support old browser supporting ES5 code only. In the project we integrated some external libraries written in ES6 (reconnecting-websocket is an example). Problem After compiling our project with th...
BlackHoleGalaxy

View additional questions