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

Dynamically inserting SCSS classes with React

Basic question on best practices for dynamically inserting SASS classes with React.
I have a React component with two props: componentId, and color. The components are rendered as a list. Each time they're rendered, I want them to set the component's CSS background color as this.props.backgroundColor.
I understand that I can do this with inline styles, but that that's generally frowned upon due to difficulty maintaining it. I currently have an SCSS file with a number of classes.
How could I dynamically append an SCSS class with the class name this.props.componentId and the color this.props.backgroundColor?
For example, if the component had this.props as
componentId: list-item-123456789
color: #00FFFF
How could I append, from the react component, the following SCSS class to my style.scss file?
.list-item-123456789 {
background-color: #00FFFF;
}
Is this a job for styled-components? Is this one of those cases where inline-styles is probably the best practice for the job? It feels icky to me to do that just from what I've been reading but I'm not sure how to approach the above solution.

As you've guessed, this would be a job for styled components or inline-styles. When your React application compiles, all of those SASS files are converted into standard CSS via Webpack (I presume). Thus, once your application has been bundled and deployed, your SASS files are redundant.

Inline styles are not the same as just setting a class on an element which you can do if you are going to actually manually create all those style classes.
Just do
<li className={{this.props.componentId}}>Some Item </li>
Make sure your SASS class's are global or in scope for that component.

Vue/Webpack: split CSS into 2 files based on condition

I have a Vue project with SCSS included in .vue files.
I need the styles for some of the components to get compiled into a CSS file called global.css, and the rest into another file (let's call it default.css).
I want to be able to decide easily which component styles go where and was thinking of using something like this, if it's even possible:
<style lang="scss" global>
/* SCSS goes here */
</style>
So basically I'm trying to find a way to split the styles using the global keyword.
If a component has the global keyword, its styles should go into global.css, otherwise into default.css.
Is this even possible? Am I embarking on something super complex?
Any other idea as to how I could achieve this in another way if so?

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.