I created an default vue app and do not changed anything, but when I tried to run it, I got
The default since January 20, 2022 is to use Vue3 (and you should), even if you still want to use Options API because Vue2 will be end of life next year (and is just slower/with more cons).
So make yourself a favor and start with this rather
npm init vue#latest
Related
We're currently testing a vue.js app with jest 24.9.0, ts-jest 24.30, and #types/jest 24.9.1 . We see that jest is at v27 and I looked at upgrading, but things broke all over the place, so I backtracked to this combination:
#types/jest: upgrade from 24.9.1 to 26.0.14
jest: upgrade from 24.9.0 to 26.6.3
ts-jest: upgrade from 24.3.0 to 26.5.6 (shouldn't matter).
It now looks like mount(VUE COMPONENT, { propsData: props }) is returning an empty <body /> element (mount is imported from #vue/test-utils).
Anyone have suggestions? We also get many warning messages about finding components with 'find' or 'get' -- how should we replace our querySelector strings (once we actually have sub-elements in the objects returned from mount so there's something to find or get)?
Try referring to the changes here.
Its jest official repo mentioning all the changes with various version. Check if there are any breaking changes.
I'm new to Vue and I hope someone can help. I have an app that uses Vuetify (2.2.23), and when I render it locally for development, the HTML contains:
So, v-main is a class, and it's being located in my CSS for styling. However, in another installation from the same files (I've checked the versions of everything too), I get:
So, v-main is now an element, so the CSS is not being applied.
I realise that I can duplicate my styling so that they look the same to the user, but I'd like to understand what to look for in the setup of the projects that would make this happen in the first place?
The versions I'm using are:
Vue 2.6.11
Vuetify 2.2.23
Thanks in advance!
Why is it the thing you've checked the most is the thing that's the problem? This was a version problem after all. I used the ^ minimum requirement, and the two servers ended up using different versions. Bumping both to a minimum of Vuetify 2.3.9 solved it.
Posting this answer in case it helps someone else.
I have two Vue projects, one is an app that is injected in an older website via script-tag and a second project, that is a form, that uses own logic and vuetify components. The later should be used in other projects also and gets props from where it is used. Therefore it should be compiled as a library.
If i compile it as app i can transfer data via a global JS variable, but i would like to use the components like any other library. (Just import it and put it in the <template> like so: <MyComponent ..props../>)
If i compile it as a library i got all sorts of vuetify not correctly initialized. After i cleared them my HTML looked excactly like my code (eg:<v-app>...</v-app>) without any errors.
The 'serve' from the standard installation worked without a problem in the component project.
The component project is created with vue create project and modified according to https://cli.vuejs.org/guide/build-targets.html#library
I already searched online and got only so far, my question on the vue discord was left unanswered, so my questions are:
1. Is this even possible to do?
2. If it is, could you please point me in a direction, or give a summary of what i have to do?
3. If not, is there another way of achieving this, except for copying the raw code into each project?
Short answer, yes. Is it recommended, no.
The best way to do this is to export your form component as a library so that it can be imported into other projects but exclude any dependencies like Vuetify, which should be imported separately. This avoids versioning errors.
The Vue docs on packaging for npm are useful as is this article
We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
Switching from "bootstrap": "~4.0.0-beta.2" to "bootstrap": "^4.0.0" added new variables in the _variables.scss. Boostrap classnames only change when there is a major version upgrade (AFAIK), but does the same apply to _variables.scss too?
It would change how we share the _variables.scss accross our application.
Does variable names change between releases?
The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).
The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).
Of course new variables can be added, as those shouldn't break your CSS.
If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.
Using variables in SCSS
When you have set up your build tools, and created your SCSS file (let's say custom.scss), you can import Bootstrap and override any variable you want (you'll find them in _variables.scss in the Bootstrap source code):
//Your variable overrides
//Let us change the primary color which is set in the primary variable
$primary: #ce40c5;
//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
#import "node_modules/bootstrap/scss/bootstrap";
Some things to note:
If you aren't using NodeJS, then just make sure that the import path directs to the bootstrap.scss file (don't put .scss in the import)
If you have checked the source code of Bootstrap 4, you may have seen !default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced
There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).