DEV Community: owl✨

How to Change the Bootstrap Primary Color in Vue 3.0 CLI

owl✨ — Sun, 05 Nov 2023 02:26:22 +0000

How to Change the Bootstrap Primary Color in Vue 3.0 CLI

While some may argue that Bootstrap has aged, I believe it remains a robust framework. Bootstrap simplifies code and enhances readability, making it a valuable tool for many developers, myself included.

This article is aimed at explaining how to customize the original color provided by Bootstrap to suit your preferences. If you wish to make this change, follow the instructions below.

Installation of Bootstrap in Vue CLI

To integrate Bootstrap with Vue CLI, you can follow the official documentation available at https://bootstrap-vue.org/docs.
https://bootstrap-vue.org/docs

First, you need to install the required packages using npm:

npm install vue bootstrap bootstrap-vue

Next, you'll want to install the SASS library to use SASS in your Vue CLI project:
Install sass library for Vue CLI to use SASS.

npm install sass-loader node-sass

Customizing the Bootstrap Primary Color

To customize the primary color of Bootstrap in your Vue CLI project, you can create an SCSS (SASS) file and import it into your main.js file. This allows you to redefine the primary color to your preference.

1: Create an SCSS file in your project. You can place it in the src/assets/scss directory. Let's name it bootstrap-custom.scss. Here's an example of what the file might contain:

$primary: rgb(248, 126, 250);

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';

In the example above, we redefine the $primary variable with your desired RGB color values. You can adjust these values to set your preferred primary color.

2: In your main.js file, import the custom SCSS file you just created, like this:

import "./assets/scss/bootstrap-custom.scss"
// import 'bootstrap/dist/css/bootstrap.css' // Comment out or remove these lines
// import 'bootstrap-vue/dist/bootstrap-vue.css'

By importing the custom SCSS file, you override the Bootstrap primary color with your defined value. Be sure to comment out or remove the default Bootstrap CSS imports as shown above.

Now, Bootstrap in your Vue CLI project will use the customized primary color defined in bootstrap-custom.scss. You have successfully personalized the primary color of Bootstrap to match your project's design.

Conclusion

In this article, we've seen how to quickly customize Bootstrap's primary color in a Vue 3.0 CLI project. Bootstrap's enduring power in simplifying code and improving readability is evident.

By following these steps, you can adapt the primary color to match your project's style, creating a cohesive user interface. Enjoy the flexibility of Bootstrap and Vue CLI for your web development journey.

For more details, refer to the official documentation and reach out to the developer community for assistance. Happy coding!

Vue 3.0 Template Directive CheatSheet

owl✨ — Sun, 10 Sep 2023 08:15:04 +0000

Vue 3.0 Template Directive CheatSheet

This is a cheat sheet that compiles the Vue 3.0 directives I commonly use. Feel free to utilize it while developing your projects.

Vue 3.0 Template Directive CheatSheet
- v-text
- Methods
- defination of atribute
- v-on:click
- v-on:mouseover
- v-on:mouseover.stop
- v-on:click.prevent
- v-model for text
- v-model for radio buttons
- computed
- watch
- Changing CSS Classes in HTML Elements
- Specifying Styles in HTML Elements with Data
- Conclusion

v-text

The v-text directive is a fundamental directive used to set the text content of an element. It can be particularly useful when you want to bind dynamic data to an element.

The below example uses 'data()' like Vue2 using.

The following sample code is same as the above one.

Methods

In Vue.js, methods are essential for creating dynamic web applications.
They let you define reusable functions within your Vue components, triggered in response to events or actions.

defination of atribute

The following demonstrates the way of specifying an attribute in an HTML element.

v-on:click

There are several usages of 'v-on:click' in Vue. So, the following example explains two ways to use the directive.

v-on:mouseover

The following example demonstrates how to obtain the mouse position through the '$event' argument when the mouse is moved.

v-on:mouseover.stop

While the following example retrieves the mouse position in a specific area, it stops capturing the mouse position within that particular region.

v-on:click.prevent

The 'v-on:click.prevent' directive prevents the default behavior that HTML elements typically offer when clicked. Instead, it invokes a custom method defined by the developer.

v-model for text

'v-model' enables two-way interaction. HTML elements can receive values from a data object, and conversely, data objects can receive values from HTML elements.

v-model for radio buttons

'v-model' can also be used with radio buttons.

computed

Methods always run whenever they are invoked, irrespective of whether the dependent properties have changed or not. On the other hand, Computed properties are recalculated every time they are invoked, but only if any of their dependent properties have changed.

watch

Watch is rarely used in production; instead, Computed properties are the preferred choice. This is because Computed properties and Watch serve similar functions. However, if you need to work with properties asynchronously, Watch is the better option compared to Computed properties. The key distinction lies in synchronization: Computed properties are synchronous functions, whereas Watch is asynchronous.

Changing CSS Classes in HTML Elements

In Vue.js, you can dynamically change HTML CSS classes based on the data in your JavaScript. This flexibility allows you to adapt the styling of your HTML elements in real-time as your data changes.

Specifying Styles in HTML Elements with Data

You can define CSS styles for HTML elements using data arrays in Vue.js. This allows you to manage and customize your element styles dynamically from the JavaScript side.

Conclusion

All the Vue directives discussed above have differences between Vue 2 and 3, making them essential tools in Vue development. These examples are intended to simplify your daily development tasks and enhance your understanding of Vue.js.

How to show Nerd Fonts in Visual Studio Code

owl✨ — Sun, 20 Aug 2023 09:38:36 +0000

Nerd Fonts offer a fantastic collection of icons that seamlessly integrate into various applications on your computer, from Notepad to email clients. However, configuring these icons to appear in Visual Studio Code requires a specific setup. In this article, we will guide you through the process of displaying Nerd Fonts within Visual Studio Code.

Installing Nerd Fonts

To install Nerd Fonts, follow the official website's instructions. If you're a Mac user, I recommend using the 'brew' command for the installation. You can find the fonts and installation details at:
https://www.nerdfonts.com/font-downloads

Setting Visual Studio Code

Without proper configuration, Visual Studio Code unfortunately doesn't display Nerd Fonts icons correctly. Therefore, you need to perform the following setup in your Visual Studio Code:

Open the Settings Page.
Search for settings using the keyword 'terminal.integrated.fontFamily'.
Enter "'Hack Nerd Font'" into the 'Editor: Font Family' field, as shown below:

The steps outlined above are demonstrated in the following movie:

(Note: I attempted to configure the settings according to the official website's instructions as https://code.visualstudio.com/docs/terminal/appearance, which suggested using "Hack NF" for the 'Editor: Font Family' field. However, this didn't work as expected. Instead, using "'Hack Nerd Font'" in the field worked properly.)

Conclusion

After configuration, Nerd Fonts icons appear in your Visual Studio Code.　Have a good VSCode life!

The best 10 Shortcuts of IntelliJ I would often use

owl✨ — Sun, 10 Jul 2022 02:34:52 +0000

Introduction

IntelliJ provides us with many shortcut keys. It makes the development cycle speed up.
While it is convenient to use countless keys, more keys cause more confusion. I, therefore, picked up the essential keys on development and recorded them in this document.
If you had any excellent keys that you strongly recommend, leave comments about them. I would update this document with your comment taking the screen capture. Thank you.

Shortcut keys

The following shortcut keys are for Mac only.
Using Windows, you can replace the command key in Mac with the control key in Windows. I'm guessing it might work.
　　

1. Expand editor

⌘ 1 is used to expand the editor area while simultaneously closing the left-side window.

2. Switch editor tabs

This shortcuts, ⌘ shift [ and ], allow you to quickly switch between editor tabs, making it easy to focus on the specific tab you need, such as the Browser tab.

3. Jump at the navigator file name

⌥ F1, followed by 1, allows you to quickly move the focus to the file name in the tool window. This is particularly useful when you want to navigate to the file name in the navigator area for the currently open file in the editor.

⌥ F1, then 1

4. Show the list of recently opened files

⌘ e opens a list of recently opened files, making it easy to quickly navigate to files you've worked on recently.

5. Fix syntax error

⌥ Enter is used to quickly fix syntax errors, such as undeclared variables or missing imports, by showing you available code suggestions and fixes.

6. Move line

⌥ shift ↑/↓ is used to move the currently selected line or block of code up or down in your code editor, allowing you to quickly adjust the positioning of code within your file.

7. Toggle Case

⌘ shift u toggles the case of selected text, converting uppercase letters to lowercase and vice versa.

8. Reformat code

⌘ ⌥ L is used to automatically format your code, including fixing broken indents, ensuring that your code adheres to a consistent and readable style.

9. Show Hierarchy

⌥ ctrl H opens the Hierarchy tab, which lists the caller methods, allowing you to navigate and explore the hierarchy of method calls in your code.

10. Rename

Shift F6 allows you to rename a method without needing to consider refactoring for its caller methods.

Conclusion

The above keys are the ones I rely on daily while coding, but there are many other valuable shortcuts out there. As mentioned earlier, if you have any excellent shortcuts you'd like to recommend, please let me know, and I'll be happy to update this article. Thank you!