Experimenting with Vue.js the first thing I noticed is how every instance of a component that I define as single file component and include as custom element gets a random hash attribute like data-v-58fd7087="".
Specifically:
Every DOM element of every instance of a given component gets the same hash
The hash is generated independently of the router
The hash is stable between calls
The hash is stable between name changes of the component
The hash is not stored / generated on the disk
Thus the hash is generated dynamically
Could it be generated by Karma or Webpack that are part of my Vue setup?
If not, these are some surprising observations to me. It leads to two questions:
When and how is this hash (attribute) generated?
Why is the hash (attribute) generated?
Something similar occurs when using scoped CSS with Vue Loader.
I use scoped css and I have attributes like data-v-4646bc3c, so I figure that is it.
If you don't want this feature, try removing the scoped attribute from your single file components.
<style scoped>
/* local styles */
</style>
If you're using vueify and you're wondering why you are getting changes in your build without having changed anything, make sure you are running vueify with the process.env.NODE_ENV set to 'production'. Otherwise it generates hot-reload code that has new data-v-* hashes on every build.
Related
Currently when importing components from another file to be used inside the template part, if the name of the component is not correct, Vue just gives a warning about this. Is there any way to configure it so that it errors during compilation or building, so that it is easier to do refactoring or moving around components, since in Nuxt, we can enable auto-discovery component, just that we need to include the directory it is in as well as part of the component name. For example, if I have a component named PhoneNumber inside base folder inside components folder, I can use that component directly by using BasePhoneNumber.
I have tried disabling the auto-discovery component in Nuxt, and I got a lot of this unknown custom element as expected. But this only triggers the warning, which I can only see the warning when I'm browsing that page. So there's a big chance of making a mistake where I update the name of the component in one page, but another one in another page is missed
I'd like to use the technique described here to have web workers in a component without having to handle additional files.
However, adding another <script> element seems not to work:
it I add it before the component's script part it doesn't get recognized/found by document.querySelector
if I add it after the component's script part, the component doesn't compile
The only solutions I've found are:
source in a multiline string: ugly, messes up the editor
script inside the template: even uglier, exposes innards
Any better solution out there?
my app consists of:
6 components in component folder,
3 JS files in library folder.
inside of component_1 I have a Layout with ref myLayout,
one of those JS files myLayoutHandler manipulate myLayout (animate it or other stuffs) , when this JS file runs inside component_1 it works. ( it uses : this.$refs.myLayout.nativeView and this is my problem ) but when it runs inside other components due to the this.$refs. it will not find the myLayout.
So how can I access myLayout all over the app? Is there something like: global.$refs, or some method like getElementbyId?
You may always use the {N} way of identifying elements. Use id instead of ref and call getViewById(yourId) on the Page instance.
The current page can always be accessed from any element Or frame.
Edit:
If you prefer Vue way of accessing still, you may use $root or $parent, but for every parent above the current component, you will have to chain them.
When creating a Single Page Application, I have had the need to reuse CSS as a string.
The need was from a library requiring passing CSS as a string and needing to also use that CSS in the page.
To achieve this, I went through 2 routes, and both failed. Referring to the style tag element should be simple, so I'll focus on this in this issue, but if anyone can solve the other route, please let me know. Regards.
Attempted routes to solve issue:
Reference style tag element. Couldn't get this to work. Even has problems using global querying because of build process destroying ids.
I tried using raw-loader to directly import, but failed. I am using Typescript so tried to import as a string but failed again.
I was able to fix my main goal of reusing the same CSS by using external css in the style tag and importing the css as a string using raw-loader.
import css from !!raw-loader!./my-css.css
...
<style src="./my-css.css">
I still do not know how to get a safe reference to the style tag, but the above solves my issue.
* The reason for the style tag not being easily referenced even via document.querySelector is that the build process seems to strip attributes.
I'm new to Vue (and the concept of single file components) and not sure how the CSS is compiled when my app is generated.
I have a pattern library where all the SCSS is compiled for my project so I want to pull this into my components. I know I can load in the mixins and variables globally, then I intend on handpicking other blocks of sass if they need to be used to style that component.
What I'm worried about is:
if I keep using the same style definitions in multiple components, will these be duplicated in the compiled css?
If so. how can that be avoided? Eg:
I import the 'headings.scss' in 10 components. Will there be 10 instances of that 'headings.scss' file in the compiled CSS?
I hope that makes sense! Just need some more clarity here.
Yup there will be duplication. But if you are using vuejs webpack template the production build's css is processed by cssnano which will discard duplicated css
note; only exact duplicates will be discarded.