We Keep Coding

How would one deal with longer vue.js file?

I'm coming from a Laravel blade background where I can slice a bigger chunk of my codes out, and import them back in one by one like so, and it will behave the same;
Ex.
My codes
https://www.bunlongheng.com/raw/NzgyNGE3MjktMDQ2NS00Y2Q5LTkzNDEtZmUwMDQxMWRiZGI0
Sorry: I tried to post it here, but it's too huge for snippet allow, please see my current codes on above link.
My vue file now is reaching ~2000 lines of codes now, and it' getting very hard to work with.
Can someone please show me how to slice out some codes and import it back in and achive the same functionality?

As per my understanding you want to reduce the number of lines of code from the single file. If Yes, I am here giving you an example of how you can do that for CSS styles. For JavaScript/Components, you can achieve by breaking the large feature/functionality into chunks by creating a separate utility/components.
Styling with external CSS files
You can include external CSS files and apply them globally to your app. Let me explain with an example, You have common theme for the application then you can add all the styles for that theme in a theme.css file in the src/assets directory. Files in this folder get processed automatically by Webpack.
Next, in your src/main.js file, import the theme.css file like so :
import '#/assets/theme.css';
The theme styles should be applied to the app now. Hence, no need to add the styles inside the components separately.
Why scoped styles ?
If You want to add any customization in the style at component level then you can add scoped styles. To keep the style definitions close to the component we can add a element inside it with scoped attribute.
<style scoped>
</style>
As per the author comment - I have issues with similar HTML codes and when I don't know how to move them over properly and include them back in without missing variables errors
Best practice is to construct your application in small, modular blocks of code. It makes the application easier to update as it grows in complexity. You can create a small .vue components which contains their own HTML <template>, <script>, and <style> tags and can be implemented in other components instead of putting whole functionality code into a single .vue file.

The answer would be to extract sub-components from your big-component and import them in your big component to make it shorter.
A good rule of thumb in programming in general, is that if code repeats it can be modularized. In the case of Vue, this can be achieved by putting repeating pieces of code in components.
The parts that slightly differ can be made into props that you can pass into these components.
Another rule would be that if you have a huge v-if/v-else that both render huge parts of code under each, the contents under each can be extracted as separate components.
I would suggest you read more of the following:
https://vuejs.org/guide/essentials/component-basics.html
https://vuejs.org/guide/components/props.html

Apply css style to all primeng dialogs in my angular app

I am using prime ng dialog all over my angular application. I can change each specific dialog style by using ng-deep. For eg I have contact us page for which I have these files:
contact.html
contact.component.ts
contact.css
So I place the below css in contact.css and it changes the contact us dialog title bar color.
:host ::ng-deep .ui-dialog .ui-dialog-titlebar{
background-color: red
}
I want to do this for all the dialogs in my application, how can I do this? I placed the same css in style.css file in src folder and it didn't work.

So angular components by default employ a very handy strategy of Style Encapsulation which makes it so that styles don't bleed out into other components and cause unwanted effects.
You can utilize ng-deep like you have to allow styles defined within it to be inherited by child components of where it's specified.
However for things to be globally inherited you'll want to define them highest up in the order of inception so those styles cascade down to selectors below. In a default angular application that's not using SCSS or another pre-processor one of the easiest ways to do this is to add them to one of the first files initialized that hosts the child components such as index.html or app.component to allow components initialized afterwards to inherit them when they're rendered.
Hope this helps, cheers!

How to isolate / scope global css in vue

Context: I have a Vue CLI project, consisting of two main parts: 1) what the customers see and 2) what an administrator sees. The customer part is using Bootstrap CSS and the other part is using Vue Material. Even though I am planning to rewrite the Vue Material part to Vuetify, the problem will most likely persist.
The problem: The Bootstrap CSS is conflicting with the Vue Material CSS. When the Bootstrap CSS is applied to the Vue Material section, it looks messed up. The other way around too; when the Vue Material CSS is applied to the Bootstrap section, it looks messed up.
Is there any way I could make this work?
This Vue project used to be encapsulated inside a Laravel project, making heavy use of Laravel Mix. I could then use the mix file to compile all the Bootstrap CSS into 1 bundle. This bundle would be referenced in the index page using this line:
<link rel="stylesheet" href="bootstrap-bundle.css" id="bootstrap-stylesheet">
<link rel="stylesheet" href="vue-material-bundle.css" id="vue-material-stylesheet">
Using two layout components in Vue, I could then toggle the stylesheets in like this:
// The Bootstrap layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = false;
document.getElementById('vue-material-stylesheet').disabled = true;
}
// The Vue-Material layout component:
created() {
document.getElementById('bootstrap-stylesheet').disabled = true;
document.getElementById('vue-material-stylesheet').disabled = false;
}
It may not be a pretty solution, but it works. Also works in most browsers.
However, I now use Vue CLI instead of Laravel & Laravel Mix. This means I cannot name the generated output as easily anymore.
I have already tried using the CSS deep selector: /deep/ & >>>. But this does not fully work since bootstrap also sets styles to the :root, html & body elements. So when using the deep selector in scoped CSS, those styles are not applied because the end result would be something like this:
.customers-container {
body {
// bootstrap adds style to the body
}
}
The above does not work because the body is not a child of the customers-container but the other way around.
I feel like there might be a solution using bundle names or chunk names or something else from Webpack or Vue config. But my Webpack knowledge is not enough to work this out myself and I cannot seem to find the answer online.

First thing that comes to my mind is just downloading the bootstrap and vue-material stylesheets. Then you can try doing the following, grab the bootstrap stylesheet and wrap it in something like:
.administrator-view {
/// the complete bootstrap stylesheet
}
Do the same with the vue-material but with a customer class .customer-view
Then you can add one of those classes at the HTML or body element whenever you switch between the views.
Don't forget to include both stylesheets!
EDIT: Did a search on the site, you should check Limit the scope of bootstrap styles

How to avoid css conflict when integrating angular 6 app into other app?

We made an angular 6 webapp and we would like to integrate this webapp into one of our customer webshop.
The problem is that we have some css conflict.
For example :
- The webshop uses bootstrap 3 and our app bootstrap 4.
- Some shop css are overriding webapp css.
- Some webapp css are overriding webshop css.
What is the best solution to avoid these conflicts ?

The best solution would be to use one bootstrap version for the whole project. If you mix bs3 and bs4 there will be conflicts because the classnames are (for the most (grid-)part) the same but the underlying css is different.
One solution would be to wrap the webshop in an extra div with a specific class and import bootstrap3 css only for this class, like so (in SASS)
.webshop {
#import all-of-bootstrap3;
}
That way bootstrap 3 only works for everything that's inside this wrapper. Since bootstrap has low specifity, this should be enough to overwrite it.
Ideal solution would still be to use same bootstrap-version for one project.
Edit: This of course also works the other way around, you can also wrap all of your components in one class so that all your css are using the higher specificy. Might even be the better solution if you have to support multiple clients.
you can of course also change the css from bootstrap itself, as explained here Customize Twitter Bootstrap Classnames

Good answer from #cloned
Also, you might try to wrap one app in one class and the other app in another class by putting a class on the html tag.
Then prefix all your styles for one app like this:
html.app1 .some-style {
background-color: pink;
}
And the other app like this:
html.app2 .some-style {
background-color: green;
}
If you are using scss or something similar this should be pretty straightforward since you can use nesting.

Vue.js modify other component's style

I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:
I've am using vue-router and the following structure for the main app template:
<customNav></customNav>
<router-view></router-view>
The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.
I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.
How would I solve this problem?

You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground
<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>
I think you can change this variable in two ways:
Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.