vue-cli-3

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

亡梦爱人 提交于 2019-12-13 04:17:57
问题 So I have this Component code <template> <div class="example-class"> <p>Test</p> </div> </template> <style> .example-class { background-image: url("HOW to include the image here?"); } </style> 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 using @/assets/images/sample-image.png It wont include the image. It is giving an error below ERROR Failed to

How do you include vuetify inside web component

荒凉一梦 提交于 2019-12-11 18:27:59
问题 I'm building a web component using the following command : vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue' I would like to use Vuetify inside of this component. How do I add it to mycomponent.vue so that it is scoped inside the component's shadow root? This component will be dynamically loaded into apps built with other frameworks/styles. I want the web component to be able to use, for example, v-btn , v-layout , etc. within it. Thank you, Donnie 回答1: From

Using custom events in a component that is registered programmatically [VUE]

此生再无相见时 提交于 2019-12-11 15:49:54
问题 i am appending a child component in Vue programmatically as seen below: var ComponentClass = Vue.extend(FormulaGeneratorConstant) //create instance from FormulaGeneratorConstant component this.constants.push('variable1'); var constant = new ComponentClass({ propsData: { value: this.constants[this.constants.length - 1] } }); constant.$mount(); this.$refs.droppableContainer.$el.appendChild(constant.$el) but right now i can only pass props in this code. i would like to know how to implement v

Vue CLI 3 + Vuetify - Not working on IE 11 (Babel does not transpile?)

萝らか妹 提交于 2019-12-10 15:23:53
问题 I’m using Vue CLI 3 with Vuetify for my project. It works well on Chrome and iOS 12, but it shows blank page on IE11 and iOS Safari < 12. The console in IE11 shows: SCRIPT1003: Expected ':' I think it’s because Babel does not transpile the ES6 syntax (arrow function, spread, etc) to ES5 syntax. I still see it in the compiled code after running yarn build. Here is my babel.config.js: //bable.config.js module.exports = { presets: [ [ '@vue/app', { useBuiltIns: 'entry' }] ] } Here is my

build and publish dist folder to github pages

隐身守侯 提交于 2019-12-10 10:46:08
问题 I created a project with Vue.js and Vuetify using the Vue CLI. I would like to host this application with Github Pages. So I took a guide from here https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch and I am not using the history moute of the Vue Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don't need a server. I created a build of my project and

Vue-cli run build TypeError 'name' Undefined

五迷三道 提交于 2019-12-10 04:30:27
问题 I just started to use vue-cli and I got stock with a problem. Following the Docs instructions: I installed vue/cli npm install -g @vue/cli (version 3.11.0). I created a project vue create test (default config) and cd into the folder. But when I tried to build the project npm run build , I got this error. TypeError: Cannot read property 'name' of undefined at entrypoint.getFiles.reduce (C:\Users\MyUser\test\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:43:25) at Array.reduce (

Unable to override styles in vuetify

a 夏天 提交于 2019-12-08 05:06:47
问题 how can I overwrite actual classes in vuetify? I have created a ./src/stylus/main.styl file where I override some of the current vuetify settings as a test: @import '~vuetify/src/stylus/settings/_variables' @import '~vuetify/src/stylus/elements/_typography' $material-dark.background = green $body-font-family = Arial $alert-font-size = 18px .display-2 font-size: $headings.h6.size !important font-family: $headings.h3.font-family !important @import '~vuetify/src/stylus/main' For some reason the

Why there is a node_modules folder under my home folder?

徘徊边缘 提交于 2019-12-08 04:07:28
问题 I already have a global node_modules folder in /usr/local/lib/node_modules, but I just found there is also a ~/node_modules folder under my home floder. Can I delete this one? I execute node -e "console.log(global.module.paths)" and I get [ '/Users/Username/node_modules', '/Users/node_modules', '/node_modules' ] And if I delete the node_modules folder which is under home directory, then I execute npm list @vue/cli-ui , It would should this error: /Users/Username └── UNMET DEPENDENCY @vue/cli

Vue Cli 3 Local fonts not loading

馋奶兔 提交于 2019-12-07 09:33:27
问题 When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in my dist folder anywhere. I have tried adding loaders in vue.config.js, changing url paths, and moving the @font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js. Font loading: @font-face

Vue index.html favicon issue

僤鯓⒐⒋嵵緔 提交于 2019-12-07 07:00:32
问题 I am using Vue 2.0 and Vue CLI 3.0. I am trying to get the favicon.ico/png file work properly and am having no luck at all. I have narrowed the issue to the following. The index.html file generated by yarn build converts this line of html code: <link rel="icon" href="favicon.png" > to... <!--[if IE]><link rel="icon" href="favicon.png"><![endif]--> If I go into Chrome developer tools and change the line back to the way I had it originally, the ico/png file renders as expected. My question is: