masanos note

Notes

51
supabase with Vue3

I use supabase and vue3. Get the data of the table created in supabase on the front end. This is the record until the acquired data is displayed on the web screen.

Vue3 with bootstrap-icons

using bootstrap-icons with vue3

[vue3]Install bootstrap5

use bootstrap with Vue3

[vue3] install

setup vue

[Nuxt3]The first thing I do when launching a nuxt3 project. (^3.5.2)

This is a memo to set when launching a project with nuxt3.

[Nuxt3][Bootstrap]Use Bootstrap icons with Nuxt3.

Bootstrap-icons are very useful.You can use it for free. This time I installed bootstrap-icons on Nuxt3 and used it.

[Node.js] Storing API results in js

Create a Jamstack configuration and store the API results in a File to reduce the number of communications with the API.

[GA4][GTM]Configure GA4 in GTM

A record of the process of setting up GA4 in Tag Manger and checking it on the GA screen.

[Nuxt3]Using Google Tag manager with NUXT3

Use Google Tag manager with NUXT3. Then check if the script is loaded.

[GA4][BigQuery]Linking GA4 and BigQuery

Working notes for setting up GA4 and BigQuery. Create a Project in GCP, link it to GA4, and then view it in BigQuery.

When you want to scrape a SPA site, PhantomJsCloud is solution.

Sites created with SPA cannot be scraped as is. With PhantomJsCloud, you can convert pages made with JS like SPA to HTML and scrape them.

Error brew -v | update-reset

brew -v & issue error | /usr/local/Homebrew/Library/Homebrew/version.rb:368:in `initialize': Version value must be a string; got a NilClass ()

Use Google Spreadsheet as API with Nuxt3.

Get the endpoint of Google Spreadsheet and get the json response.

Get json from a spreadsheet using GoogleSheetsAPI v4.

Get the data in the spreadsheet with the API.

[Python]Install Python to Mac

Install python using homebrew, pyenv.

[Nuxt3]Install stable version of Nuxt 3.0.0. | npx nuxi init nuxt3-app

use stable version of Nuxt 3.0.0. npx nuxi init nuxt3-app

Make Ranking with MySQL

It is a useful function when you want to create a ranking in MySQL.

watch & v-model | Vue3 (Nuxt3)

Use v-model for Form in Vue3 / Nuxt3. And watch the v-model value.

window & document | Nuxt3

How to use document and window with Nuxt3.

Using custom domain, Hosting to GitHub Pages with Nuxt3

Generate html with nuxt3 and host it on GitHubPages. set custom domain.

GA4 with Nuxt3

Install GA4 on Nuxt3.

MySQL - Date Function - Tips

Records when doing date arithmetic in MySQL. Calculation of age. Calculating the number of days elapsed from a point.

Use Nuxt3 props

How to use props in Nuxt3

Use MicroCMS with Nuxt3

Using GoogleFont with Nuxt3

Using GoogleFont with Nuxt3

Error - Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated. - Bootstrap5

Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated. To preserve current behavior: $weight * 1% More info: https://sass-lang.com/d/function-units

using sass with nuxt

how to use sass with nuxt3

Firebase9 Google Authentication with Nuxt3.

Implemented Google Authentication for Firebase9 on Nuxt3.

Set favicon in Nuxt3

How to set favicon in Nuxt3.

Use bootstrap5 with Nuxt3

Using Nuxt3, install bootstrap with npm and check the display.

Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

Error Code: 1290. The MySQL server is running with the --secure-file-priv option so it cannot execute this statement

[Nuxt3] How to separate source directories

In nuxt.config.js , specify the directory where you want to organize sources in srcDir.

microCMS & GitHub Actions & Nuxt3

Create an article with microCMS, automate Nuxt3's npm run generate with GitHub Actions, and reflect it on GitHub Pages.

Using highlight in Nuxt3.

Add syntax highlighting to code with highlight.js & cheerio

use package.json value

use package.json value

frontmatter-markdown-loader & highlight.js

Install frontmatter-markdown-loader & Use highlight.js

Install Font Awesome on Nuxt2 via npm.

Install Font Awesome on Nuxt via npm.

Github pages with GitHub Actions

Github pages with GitHub Actions

Cannot find module '~/*/*.vue' or its corresponding type declarations.Vetur(2307)

Cannot find module '~/*/*.vue' or its corresponding type declarations.Vetur(2307)

Cannot find module. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)

Cannot find module. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)

TypeScript Object.

TypeScript Object.

Bootstrap5 with Nuxt2

Use Bootstrap5 with Nuxt2

processmd with Nuxt2

Use processmd to change markdown to json.

[MySQL]Install MySQL Workbench

Install MySQL Workbench. & try it in local environment

Convert Markdown to HTML. convert frontmatter to json

Useful when you want to write blogs in Markdown. You can convert markdown to html. Then you can convert the frontmatter to json.

Install homebrew, nvm, node to Mac

homebrew, nvm, node I reset my mac, so I reinstalled everything needed for Frontend development.

[MySQL]Record of installing and starting mysql with homebrew.

Record of installing and starting mysql with homebrew.

Display the photo full screen and overlay the header and footer on top.

How about layering Headers and Footers over images to make your site look fancy? Display the image at 100vh, 100vw. Overlay the Header and Footer elements there with position: relative;

Set git repository to created project.

Set git repository to created project. & has error. Set SSH Key.

[Nuxt3] Make Header & Footer

How to make header and footer in Nuxt.

A record of the development is left in a web note.
Masanos
I want to make the world I see happy. Little by little, I am preparing to start a business. Thank you for your support.
Buy Me A Coffee
Copyright© masanos All Rights Reserved.