What is the difference between the following imports for Vuetify:
Method A:
import Vuetify from 'vuetify/lib/framework';
Method B:
import Vuetify from 'vuetify/lib';
With method A the Vuetify bundle has a size of 1.12MB (development):
With method B it has a size of 1.79MB (development):
For production the bundle size is the same.
My guess is, that with with method A Vuetify is already doing tree-shaking on the development run, while for method B tree-shaking appears only in production build.
You can check for yourself in your node_modules folder (if you use npm).
vuetify/lib/framework exports a Vuetify Class, which is the framework that handles all your vuetify magic.
vuetify/lib exports the same Vuetify Class, but also all components, directives, and predefined colors as named exports for easy access, leading to a larger bundle in development.
As you see in your own result, it really doesn't matter for production due to treeshaking. But, if you're customizing your installation, it's easier to do a single import from vuetify/lib for Vuetify and all other related components, than having separate imports and paths for colors, components, and directives.
Related
I'm using Vue2 and laravel-mix and I want to have my variables accessible globally. I eventually found this:
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'sass-loader',
options: {
//this might be "data" or "prependData" depening on your version
additionalData: `#import "./resources/js/styles/variables.scss";`
}
}
]
}
]
}
})
This does make my variables globally accessible, but essentially copies the variables.scss into every single vue component, which massively bloats my bundle size.
How can I prevent this?
Edit: This only is an issue, when the imported file is relatively big. In my project, the imported file itsself imported a theme scss (to get access to the themes variables), which ultimately copied this whole thing everywhere I needed the variables.
I fixed this by defining my custom variables in a seperate file and using those variables in the "overwriting-variables" file, something like this:
custom-variables.scss
$red: #ff0000;
overwriting-variables.scss
import 'theme.scss'; //this bloated my project
import 'custom-variables';
$--theme-red: $red
And when I needed this theme color in my vue components I just imported the custom-variables.scss instead of overwriting-variables.scss.
This does fix my bloating issue, but doesn't fully solve the problem, I still have multiple instances of the custom-variables.scss in my project, it just doesn't matter because its really small. So I'd be still happy to hear about other solutions!
You need to separate your functions, variables & mixins from actual CSS rules.
These files will be imported and available to every component you write, which is great for things like variables, functions, or mixins, but you should avoid any actual CSS rules. Adding CSS rules to your shared Sass files will import those rules into every component and bloat your project. For global CSS rules, create a separate file and import it into your main App.vue file instead.
Source: https://austingil.com/global-sass-vue-project/
I'm on my way to build my first vue frontend, i just found out that when i import json files via import statements they are fixed in the build and can't be "dynamic". For example:
...
// youtube channel info fetched and cached by PHP
import channel from '#/../public/cache/channel.json'
import playlists from '#/../public/cache/playlists/'
export default {
name: 'Home',
components: {
configuration, channel, playlists
},
data(){
console.log(configuration)
console.log(channel)
console.log(playlists)
return{
configuration, channel, playlists
}
}
}
where playlists loads an index.js that contains playlists (file generated by PHP):
import PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG from './playlist-PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG.json'
...
export default{
PLnsP5eFkpFGioJZFSaVRRxy1S7cJ6PWeG,...}
My thought was that if I do the build I will still be able to generate these files on the server and Vue resp. the generated code will refer to them - unfortunately this is not the case and I had to learn that vue imports all imports one to one fix during the build (what the name says and is obvious yes) and combines them in a corresponding js file, which makes it impossible for me to link another channel or map to new videos / playlists afterwards.
Is it even possible to "stay dynamic" via imports or do I have to get the json's via axios or something (even if the files are on the same host)?
You have to use Axios/fetch for that...
Imports are indeed static - the content of the imported file is included in the app bundle (at built time)
There is something called dynamic imports but it is the technique intended for "load only what you need at the time you need it". The content of the import is still determined at build time (at build time webpack prepares the file which will be loaded at runtime)
So if you want the content to be dynamic, loaded to the app at runtime, the only solution is to use Axios/fetch and keep the data "outside" of the app itself...
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
Im looking for a trick to make my life easier. I want to style each component in my nuxtjs application with a similar color palette, but I do need to enter the color palette in each component. Tried to use scss for the first time. How do I put variables more globally and how to reach them?
I tried to put the code into assets/scss/styles.scss But components know nothing, about remote scss.
$color1: #808060;
$color2: #3D3D34;
$color3: #151510;
$color4: #090906;
As #jayce444 mentioned, this thread will give you multiple options to achieve the task.
However, you need to think before you take this approach. In general, you should import your variables file in each component SCSS:
<style lang="scss">
#import "<PATH_TO_ROOT>/assets/scss/styles.scss";
.someclass { color: $some-variable; }
</style>
By doing this, you will protect yourself for many uncertain future possibilities. Some of them are:
Splitting repository into multiple micro front-ends
Moving into Lerna like Mono repo setup
Reusing component in other code-bases
Being explicit is more maintainable than having magical auto/global imports. We, as developers, spend more time maintaining code than writing new code.
Alternately, another clean solution is not using vue-loader for managing SCSS. It means you should not use style tag inside .vue files.
Create one master style.scss file. For each component create dedicated .scss file. And import all these files into master style.scss like:
// External third party scss from node_modules
#import '~#material/button/button`;
// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
#import './styles/colors`;
#import './components/component-1`;
#import './components/component-2`;
// .... Add remaining component
#import './components/component-n`;
There are a few advantages. Your stylesheet is no longer tied to the framework specific abstraction. You can reuse your style more easily with other code bases built on top of other frameworks. Of course, if you need to have Scoped-CSS which .vue files provide out-of-box, consider using BEM notation.
Finally, if you decide to import variables .scss file in each component, then you can use node-sass and webpack aliases to shorten the import path.
I know this is an old question but the answer still might help someone.
So to include the variables, mixins any SCSS style globally you need to load it using NuxtJS Style resource.
So for example you would have the settings.scss file in /assets/scss
$color-one: #fff;
$color-two: #000;
And you would import it in nuxt.config.js through styleResources object
styleResources: {
scss: ['assets/scss/settings.scss']
},
Make sure to read the Style Resources documentation for more info
I want to install fonts using npm, for example, Open Sans or Roboto.
If I search for Open Sans on npm and filter for packages with over 1000 downloads per month I find a whole list. I am not sure which source to choose here, some are not well maintained and none of them are from the original source of the font, in this case, google.
npm-font-open-sans
typeface-open-sans
open-sans-all
open-sans-fontface
opensans-npm-webfont
I noticed that fonts are often used through a direct link to fonts.googleapis. I would prefer to have a local copy of the font to be able to develop offline. Is there a common way to install fonts through npm? Or is there another automated font download tool that I'm not aware of?
I use typefaces yarn add typeface-roboto
and then just do a require("typeface-roboto") / import "./typeface-roboto" or whatever font you choose.
I hope this is the answer you're looking for?
Use fontsource, typefaces is deprecated now.
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (layout.js), page component (index.js), or gatsby-browser.js.
import "#fontsource/open-sans" // Defaults to weight 400 with all styles included.
Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.
import "#fontsource/open-sans/500.css"; // All styles included.
import "#fontsource/open-sans/900-normal.css"; // Select either normal or italic.
Alternatively, the same solutions could be imported via SCSS!
#import "~#fontsource/open-sans/index.css";
#import "~#fontsource/open-sans/300-italic.css";
Fontsource
The typefaces project is now deprecated and its successor is fontsource.
Usage
There's no much difference at the point of using it.
Install:
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Import:
import "#fontsource/open-sans"
Reference:
body {
font-family: "Open Sans";
}