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

Is there any solution to these problems with Next.Js?

So i recently migrated from react to Next.Js, I am facing these issues and want to know if these have a solution :
Unlike react next can't just change a specific part of webpage and keep static part like navbar same throughout all my pages, I have to specifically add my Navbar component to all pages
The {styles.example} way of using css seems like a lot of work, I saw a lot of people using to do css within the js file, but it becomes a mess when I try to make it responsive. Is there any way i can use css just as normal like import it in js file, and use classname='example' in example.module.css

use _app
https://nextjs.org/docs/advanced-features/custom-app
import css in _app is global
https://nextjs.org/docs/basic-features/built-in-css-support
css extended
head(html way, won't apply loaders,make sure resource placed as refered): https://nextjs.org/docs/api-reference/next/head
import css (_app just like head but go webpack, named if not _app): https://nextjs.org/docs/basic-features/built-in-css-support
styled-jsx (inline,scoped by default, set global via prop): https://github.com/vercel/styled-jsx
element-style-prop: the react way
example cases
head in _app: compiled global css like bootstrap reset...
import css in _app: global custom css
head in component: compiled css for component, like date picker
import css in component: named fassion
styled-jsx: css fassion, scoped by default, global if global prop set
element-style: react fassion, element level

Component getting css properties from another scss file with the same name

I have an .scss file with a name say Books.scss and a related react component Books.js in a folder.
There is another .scss files named Books.scss and a related component Books.scss is another folder.
I correctly import the properties of the .scss files in the first component using ./Books.scss but when I try to make changes in the file for a particular div className, say "tableOfContents", there is no effect on the component. This className also exists in the other .scss file.
Oddly, the changes to the first component are being reflected when I edit the className of the second .scss file.
Does anyone have an idea why this would have happened?
Both the components are similar except for addition/deletion of subcomponents. Code duplication is bad, but there was no other go to speed up work which will be regretted later on.

Sorry, turns out that the className was nested within another class which is why the css properties from the other sass file was showing up. As you mentioned #Umair, makes sense why it behaved this way.

Setting :root custom properties inside Shadow DOM

my use case is basically the following: I'm building a component library which should render a component in a web component using shadowRoot.
I have two CSS files:
component-library.css styles the component library and should not leak into the web components (I'm aware that they do when the components use inherit. This is fine.).
project.css is the global CSS file for the project, defining lots of custom properties inside :root {}. I am NOT able to change that.
What I now want is to use project.css inside the shadowRoot to style the components. The reason that it should be inside the shadowRoot is that I don't want this file to affect the component library.
Right now, when I'm trying to implement it, everything works as I want it to except that the custom properties from project.css is missing.
My understanding is that this can't work as the project.css would have to use :host {} instead of :root {}.
Is that correct? Would there be any way to achieve this though?
Thanks a lot!

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!