jojomatik / nuxt-3-base

A nuxt 3 project with vue3, vuetify, vue-i18n translation and composition API.

Hi, I'm

and in my free time I develop software.

nuxt-3-base's Issues

Use `@nuxt/image` to generate multiple versions of a favicon

Is your feature request related to a problem? Please describe.
Each and every browser, OS and other use cases require different sizes of the favicon. It is tedious to create them manually.

Describe the solution you'd like
We should try to create these versions automatically with @nuxt/image and implement them in the head.

Describe alternatives you've considered
Create a nuxt plugin that takes care of this or improve @nuxt/image.

Additional context
nuxt/image#975

Disable eslint rule `vue/multi-word-component-names`

Is your feature request related to a problem? Please describe.
This rule is blocking components like Snackbar, which is a valid name.

Describe the solution you'd like
Disable this eslint rule to support more component names.

Additional context
Rule link.

Scoped scss is not scoped

Describe the bug
SCSS in a scoped style tag is not scoped anymore.
In a clean Vue3-project, this still works.

CSS in a scoped style tag will apply to the whole application.

To Reproduce
Steps to reproduce the behavior:

1. Add a scoped style for a class test
2. Add the class test in another component to a div
3. See, that this div gets the style

Expected behavior
Scoped scss should only apply to the component in which it is defined.

Disable eslint rule `vue/no-multiple-template-root`

Describe the bug
Vue 3 supports to have multiple root-elements in the template. This active rule prevents it at the moment.

To Reproduce
Steps to reproduce the behavior:

1. Create a vue-component
2. Add two divs in the template
3. See error

Expected behavior
Since Vue3 supports it, this shouldn't be enabled.

Suggestions for the template

Describe the solution you'd like

• add an app.vue with a <NuxtPage> as example
• add a main.scss and include it in the app.vue
• rename pages index.vue to a speaking name. The directories should be used for sub-pages
• add an example routeRule for / or so in the nuxt.config.js
• fix the dark theme in vuetify.ts
• add example on how to import images
• add a custom 404-page (error.vue in root)

Storybook

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Preload google fonts

Describe the bug
Google fonts load after the page which makes the page load slightly slower.

To Reproduce
Steps to reproduce the behavior:

1. Go to network tab
2. See late request

Expected behavior
Google fonts should be preloaded

Screenshots
Not applicable

Environment:

• Client Browser: Chrome
• Version: v1.0.0-beta.29

Additional context
Not applicable

Scan licenses of production dependencies and generate report

Is your feature request related to a problem? Please describe.
There is no machine-readable structured report of all licenses of all dependencies included in the production build.

Describe the solution you'd like
It is required to automatically generate a report and include it in the public directory (or anywhere else it can be requested from). While scanning the license, I also need a way to filter out specific allowed (e.g. MIT, ISC) and disallowed licenses (e.g. GPL) and to error out the build if one of the disallowed licenses is found.

The report needs to contain the following information as structured data:

• name (of the package)
• version
• author
• git url
• license identifier (SPDX)
• license text/ notice file (optional)

Describe alternatives you've considered
I'd be willing to write a parser for my package-lock.json including only dependencies without the dev: true flag. As nuxt3 is only one dependency (which following the docs should be installed as a dev-dependency) none of the dependencies would show up as production dependencies, even though they clearly are (e.g. vue itself). This woul require a list of packages that are used in production/ only during development.

Additional context
In my current project (Vue 2 without nuxt) I use license-checker-webpack-plugin to generate this report. I copied the snippet into nuxt.config.ts.

import { defineNuxtConfig } from "nuxt3";
import LicenseCheckerWebpackPlugin from "license-checker-webpack-plugin";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  ...
  build: {
    plugins: [
      new LicenseCheckerWebpackPlugin({
        allow:
          "(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR 0BSD OR ISC)",
        emitError: true,
        outputFilename: "ThirdPartyNotices.txt",
      }),
    ],
  },
});

Neither do I find the report in the .output directory, nor do I receive error messages, if I only allow BSD-2-Clause licenses for example. I've read in another issue that nuxt 2 nuxt/nuxt#7173 (comment) generated such a report, is this still possible in nuxt 3?

See also a discussion I opened in the nuxt project https://github.com/nuxt/framework/discussions/3376

i18n function `$t` shows linting warning when used with more than one parameter

Describe the bug
Using i18n function $t with more than one parameter directly in a template shows linting warning. Using it in the script section works properly.

To Reproduce

nuxt-3-base/pages/index.vue

Lines 4 to 5 in e0729a2

	<!-- warning: Invalid number of arguments, expected 1 -->
	<v-card-text>{{ $t("hello", { name: name }) }}</v-card-text>

Expected behavior
No linting warning is shown.

Screenshots

Environment:

• WebStorm 2022.1 EAP (Webstorm Build #WS-221.4501.160, built on February 18, 2022)
• Version: 1.0.0-beta.3

Additional context
It is currently unclear whether this is an issue with Webstorm, vue-i18n, the linting configuration or if this project missed an essential step of implementing vue-i18n in 9e4fd4b.

Blocking issues for 1.0.0

Description
This is a list of all requirements that are not yet met by this project or the dependencies of the project. Version 1.0.0 will be released if all of these requirements are met. This list is subject to change, if new requirements come up.

• Release versions of all dependencies:
  • nuxt 3.0.0+ (released)
    • #19
      • intlify/nuxt3#47
  • vuetify 3.0.0+ (released)
  • @nuxtjs/i18n 8.0.0+ (released)
  • WebStorm 2022.1+ (released)
• Fix all warnings and linting issues
  • #5
    • intlify/nuxt3#43
  • intlify/nuxt3#42 (no longer applicable since 950a82b)
  • #8
• Fulfill all feature requirements or install feasible workarounds
  • #6
    • kaorun343/vue-property-decorator#415
  • #7
    • https://github.com/nuxt/framework/discussions/3376
  • Potentially #97
  • Potentially update eslint config and plugins.
• Fix auto imports
• Host Google Fonts
• Host mdi-Icons
• Optimize bundle size and enable compression

Cannot upgrade `nuxt` version

Describe the bug
The build fails for the new nuxt version.

PR run: https://github.com/jojomatik/nuxt-3-base/runs/5617517319?check_suite_focus=true

[log] Nuxt CLI v3.0.0-2746048[9](https://github.com/jojomatik/nuxt-3-base/runs/5617517319?check_suite_focus=true#step:7:9).53fbca7
[warn] Error when using sourcemap for reporting an error: Can't resolve original location of error.
Error:  Duplicate export 'default' (Note that you need plugins to import files that are not JavaScript)
file: virtual:/home/runner/work/nuxt-3-base/nuxt-3-base/.nuxt/intlify.vuei18n.options.mjs:3:7
1: 
2: export default () => Promise.resolve({"locale":"en","fallbackLocale":"en"})
3: export default () => Promise.resolve({"locale":"en","fallbackLocale":"en"})
          ^
Error:  Duplicate export 'default' (Note that you need plugins to import files that are not JavaScript)
  at error (node_modules/rollup/dist/shared/rollup.js:198:30)
  at Module.error (node_modules/rollup/dist/shared/rollup.js:[12](https://github.com/jojomatik/nuxt-3-base/runs/5617517319?check_suite_focus=true#step:7:12)477:[16](https://github.com/jojomatik/nuxt-3-base/runs/5617517319?check_suite_focus=true#step:7:16))
  at Module.tryParse (node_modules/rollup/dist/shared/rollup.js:12853:25)
  at Module.setSource (node_modules/rollup/dist/shared/rollup.js:12756:24)
  at ModuleLoader.addModuleSource (node_modules/rollup/dist/shared/rollup.js:222[20](https://github.com/jojomatik/nuxt-3-base/runs/5617517319?check_suite_focus=true#step:7:20):20)
Error: Process completed with exit code 1.

It seems to be related to @intlify/nuxt3.

To Reproduce

Diff: https://github.com/jojomatik/nuxt-3-base/pull/17/files

Expected behavior
The build does not fail.

Screenshots
Not applicable.

Environment:

• Version: 1.0.0-beta.4

Additional context
I've opened an issue in the @intlify/nuxt3 repo: intlify/nuxt3#47

`@rushstack/eslint-patch` doesn't appear to be written in CJS

Describe the bug
A warning message is shown running npm run build @rushstack/eslint-patch doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

To Reproduce
72e01dd

Expected behavior
No warning is shown.

Screenshots
n.a.

Environment:

• Client Browser: [e.g. Chrome, Firefox]
• Version: 0.1.0-beta.3

Additional context
See also https://rushstack.zulipchat.com/#narrow/stream/262513-general/topic/Warning.20in.20nuxt3/near/273355811

Remove class style components

vue-class-component and vue-property-decorator seem to be abandoned. Maybe we should drop class style components...

Originally posted by @jojomatik in #4 (comment)

Host on vercel or similar

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Pinia

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment:

• Client Browser: [e.g. Chrome, Firefox]
• Version: [e.g. 0.1.0]

Additional context
Add any other context about the problem here.

`@VModel` annotation does not exist

Describe the bug
@VModel annotation does not exist

To Reproduce

1. Attempt to import { VModel } from 'vue-property-decorator';

Expected behavior
@VModel annotation does exist or a reasonable alternative is found.

Environment:
n.a.

Additional context
This issue is also tracked in kaorun343/vue-property-decorator#415 although neither did the creator of the issue nor did I received a response from the maintainer @kaorun343.

Use nuxt image

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.