DEV Community: Dr. Takeyuki Ueda

Why my Blog with SPA framework occurs re-download of whole site with page transition.

Dr. Takeyuki Ueda — Tue, 29 Jun 2021 00:47:09 +0000

I was surprised that each page transition, the whole site is re-downloaded! worst! I have no idea how can I make that terrible behavior?

I surveyed my blog code, then I've found that I had used <a> tag for page moving even I should have used <router-link> in my self-made TAG component! Oh!

I'm ashamed that I didn't make sense of the difference between <a> and <router-link>, and this my ignorance make my blog UX as rubbish.

I would be more careful document reader.

The out-of-the-box Sign-in / Log-in package of Vue and firebase auth, with User management pages is available

Dr. Takeyuki Ueda — Sun, 27 Jun 2021 07:25:01 +0000

Hi there,

I've created all in one vue package of login and user management with firebase ui as vue-faui-user-fe2.

Any comments (including critism because it is so important to improvement) are welcome, thank you!

Why I can't get rid of the vuetify from my bundle?

Dr. Takeyuki Ueda — Tue, 15 Jun 2021 06:47:29 +0000

I'm trying to reduce my vuetify application bundle size by using CDN and webpack externals.

My configration of vue.config.js is as follow:

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: (config) => {
    config.externals({
      firebase: 'firebase',
      'firebase/auth': 'firebase',
      firebaseui: 'firebaseui',
      vue: 'Vue',
      vuetify: 'Vuetify',
      'vuetify/lib': 'Vuetify',
    })
  }
}

But, Vuetify/lib is still remained as follow:

Ah, I've exhausted the effort of googling…

Do you have any idea? Any pointing, suggestion and opinion is so welcome! Thank you!

How I've fixed the rainbow cursor appearing frequently on my Mac.

Dr. Takeyuki Ueda — Wed, 09 Jun 2021 13:47:58 +0000

Since few day's ago, the rainbow cursor get appearing frequently on my Mac. But, Apple Diagnostic reporting ADP00, no problem.

If this is not hardware matter, it must be software matter. If software matter, restoring backup version must be fix this, I.M.H.O.

I've restored by time machine up to the time that issue was not occurred. The result is, perfect! The rainbow cursor disappear!

How to make a simple SPA base project with Vue2, Vue Router and Vuetify

Dr. Takeyuki Ueda — Tue, 08 Jun 2021 00:19:59 +0000

Following steps are confirmed at 7th June 2021 by me.

1 update vue-cli

$ yarn global add @vue/cli

$ vue --version
@vue/cli 4.5.13

2 cleate your project

vue create myproject

Select Vue 2 for now.

Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

Wait an ages (-: for creating your project.

Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v4.5.13
✨  Creating project in /Volumes/devtmp/MyVuetify/myproject.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 198.70s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 269.16s.
⚓  Running completion hooks...
[-/4] ⠠ waiting...
📄  Generating README.md...

🎉  Successfully created project myproject.
👉  Get started with the following commands:

 $ cd myproject
 $ yarn serve

Then move to created project folder.

 $ cd myproject

3 Add router

$ vue add router

I recommend to select history mode as "Yes", but it OK as you like.

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) (Y/n)

Wait a couple of ages (-:

$ vue add router

📦  Installing @vue/cli-plugin-router...

yarn add v1.22.10
[1/4] 🔍  Resolving packages...



success Saved lockfile.
success Saved 0 new dependencies.
✨  Done in 339.87s.
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in pro
duction) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 105.88s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

4 Add Vuetify

$ vue add vuetify

Select y (or N if you would register current state with git repository first, but I think it doesn't make much sense.)

 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)

Select default

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  V3 (alpha) 
  Configure (advanced)

Wait few ages.

5 Delete useless decorations from App.vue

Open src/App.vue file, and delete the lines from <v-app-bar> to </v-app-bar>. After this, your App.vue should be as follows:

<template>
  <v-app>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    //
  }),
};
</script>

Then, remove src/views/Home.vue and recreate it as copy from src/views/About to src/views/Home.vue as follows

cp src/views/About.vue src/views/Home.vue

Then, open Home.vue and change the string This is an about page to This is an home page. After this, your Home.vue should be as follows:

<template>
  <div class="about">
    <h1>This is an home page</h1>
  </div>
</template>

Finally, remove src/components/HelloWorld.vue file.

1.6 Add Material Icon link

Add Material Icon link to public/index.html as follow:

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

inside between <head> and </head>. After this, your index.html file can be as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

7 Start server

Start server as

yarn serve

Then open running App, usually http://localhost:8080/

 DONE  Compiled successfully in 20496ms                                                           16:14:57


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.11.9:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

You must be looking at such a dull page.

In case you're facing this error, downgrade sass-loader as mentioned this answer as follows:

yarn add sass-loader@7.3.1

History

07 jun 2021: first version

The easiest way to make vuetify app with Toolbar, Navigation Drawer, Menu and QR code of your site!

Dr. Takeyuki Ueda — Mon, 07 Jun 2021 11:21:40 +0000

1. create vue app with vuetify as usual.

2. add vuetify-nav

The vuetify-nav is an out-of-the-box Vuetify navigation menu component with Toolbar, Navigation Drawers, Menus, and QR code.

2.1 install vuetify-nav

Add it to your project as follows:

$ yarn add vuetify-nav

2.2 import, export and use `<Navbar/>` component

Then, at your src/App.vue, import vuetify-nav at the very first of the <script> tag and export it as components as follows:

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>

Then, inside <template> tag, put <Navbar/> on the top of <main> tag as follows:

<template>
  <v-app>

    <Navbar/>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

Finally, your App.vue should be as follows:

<template>
  <v-app>

    <Navbar/>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>

At browser, you can notice that the application has a toolbar as following.

Click the hamburger menu at the left top, you can see Navigation drawer as follow:

2.3 Add application title

You can add application title by titleStr props of <Nabvar> component. For example, by adding titleStr="My App" on your <Nabvar> at your App.vue as follow:

<template>
  <v-app>

    <Navbar titleStr="My App" />
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    //
  }),
};
</script>

You can notice that the title you specified is appeared as follow:

2.4 add navigation link

You can add navigation link by adding links props of <Nabvar> component. For example, add following links to the exporting data in the App.vue file as follow:

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'About', route: '/about'},
    ]
    //
  }),
};
</script>

Then add links props to <Navbar /> as follows:

<Navbar titleStr="My App" :links="links"/>

After this, the whole of your App.vue must be as follow:

<template>
  <v-app>

    <Navbar titleStr="My App" :links="links"/>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>
import {Navbar} from 'vuetify-nav'
export default {
  name: 'App',
  components: {Navbar},
  data: () => ({
    links: [
      { icon: 'home', text: 'Home', route: '/'},
      { icon: 'face', text: 'About', route: '/about'},
    ]
    //
  }),
};
</script>

At browser, you should see following navigation drawer.

3. for more detail

Please refer User Guide.
Also Github issues is available. Any questions, suggestions, request, and reports are welcome!

ストレージに余裕のない MacBook Air になんとか 20GB の空きを作って Xcode と Android Studio をインストールして Flutter 開発環境をつくる方法

Dr. Takeyuki Ueda — Sat, 19 Oct 2019 05:04:33 +0000

「ストレージに余裕のない MacBook Air になんとか 20GB の空きを作って Xcode と Android Studio をインストールして Flutter 開発環境をつくる方法」 をこちらにポストしました

悪戦苦闘の末、できあがった flutter の開発環境は感動的にも快適でした