search

LegacyTemplates / vuetify-nuxt

.NET 8 Nuxt.js SPA App with Material Vuetify
31 stars 9 forks source link

Vuetify need upgrade to V2 #2

Closed AGDholo closed 4 years ago

AGDholo commented 4 years ago

For new Vuetify, Nuxt community create a package: https://github.com/nuxt-community/vuetify-module

Migrate guide: https://github.com/nuxt-community/vuetify-module/blob/master/MIGRATION_GUIDE.md

It does not need a plugin file when loading Vuetify, more information pls visit the package readme file.

AGDholo commented 4 years ago

I'm working to upgrade. There are some breaking changes and some trouble log:

Trouble log:

  1. [HPM] Error occurred while trying to proxy request /json/reply/GetLinks from localhost:3000 to https://localhos t:5001/ (UNABLE_TO_VERIFY_LEAF_SIGNATURE) (https://nodejs.org/api/errors.html#errors_common_system_errors)

probable cause: I use the command dotnet dev-certs https --trust to trust my custom cert.

  1. ERROR in ./.nuxt/components/nuxt-error.vue Module build failed (from ./node_modules/vuetify-loader/lib/loader.js): Error: Cannot find module 'vuetify/es5/directives'

solve: following the migrate guide, remove all recommend command and reinstall @nuxt/vuetify

Breaking change: Upgrading nuxt to the latest version, thus In `nuxt.config':

  1. using buildModules

    buildModules: [
['@nuxtjs/vuetify'],
],
/*
** Vuetify module configuration
** See https://github.com/nuxt-community/vuetify-module#optionspath
*/
vuetify: {
icons: {
  iconfont: 'mdi'
},
rtl: false,
theme: {
  light: true,
  themes: {
    light: {
      primary: '#161e2e',
      secondary: '#0938FC',
      tertiary: '#E1F5FE',
      error: '#609CDA',
      warning: '#8F4439'
    }
  }
},
treeShake: true
}

  2. Loading mdi fonts:

    link: [
  { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css' }
]

  3. Delete plugin/vuetify file

  4. Delete

    vendor: [
  '~/plugins/vuetify.js'
],

WIP: I'm rebuilding all components file that migrating vuetify v1 to v2

Some advice: Shall we using axios package to send HTTP request?

mythz commented 4 years ago

Shall we using axios package to send HTTP request?

Not by default, the @servicestack/client package is still the easiest way to call typed ServiceStack Services.

If you get a working v2 template together I'd definitely be keen on integrating it into the default template.

AGDholo commented 4 years ago

@mythz I'll fork it and work