Explore all Vue open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Vue

vue

storybook

nuxt.js

vuetify

v3.0.0-beta.1

clipboard.js

Fixes and Docs Updates

Popular Libraries in Vue

vue

by vuejs doticonjavascriptdoticon

star image 192954 doticonMIT

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

storybook

by storybookjs doticontypescriptdoticon

star image 70458 doticonMIT

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

nuxt.js

by nuxt doticonjavascriptdoticon

star image 39155 doticonNOASSERTION

The Intuitive Vue(2) Framework

uni-app

by dcloudio doticonjavascriptdoticon

star image 36431 doticonApache-2.0

uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架

vuetify

by vuetifyjs doticontypescriptdoticon

star image 34010 doticonMIT

🐉 Material Component Framework for Vue

clipboard.js

by zenorocha doticonjavascriptdoticon

star image 32045 doticonMIT

:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:

taro

by NervJS doticontypescriptdoticon

star image 30875 doticonMIT

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

vue-cli

by vuejs doticonjavascriptdoticon

star image 29130 doticonMIT

🛠️ webpack-based tooling for Vue.js Development

jeecg-boot

by jeecgboot doticonjavadoticon

star image 28804 doticonApache-2.0

「企业级低代码平台」前后端分离架构SpringBoot 2.x,SpringCloud,Ant Design&Vue,Mybatis,Shiro,JWT。强大的代码生成器让前后端代码一键生成,无需写任何代码! 引领新的开发模式OnlineCoding->代码生成->手工MERGE,帮助Java项目解决70%重复工作,让开发更关注业务,既能快速提高效率,帮助公司节省成本,同时又不失灵活性。

Trending New libraries in Vue

YesPlayMusic

by qier222 doticonjavascriptdoticon

star image 14385 doticonMIT

高颜值的第三方网易云播放器,支持 Windows / macOS / Linux :electron:

naive-ui

by TuSimple doticontypescriptdoticon

star image 8568 doticonMIT

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.

framework

by nuxt doticontypescriptdoticon

star image 5586 doticonMIT

The Hybrid Vue(3) Framework.

petite-vue

by vuejs doticontypescriptdoticon

star image 5561 doticonMIT

6kb subset of Vue optimized for progressive enhancement

h5-Dooring

by MrXujiang doticonjavascriptdoticon

star image 5202 doticonGPL-3.0

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.

windicss

by windicss doticontypescriptdoticon

star image 4643 doticonMIT

Next generation utility-first CSS framework.

FE-Interview

by lgwebdream doticonjavascriptdoticon

star image 3960 doticonNOASSERTION

🔥🔥🔥 前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器

vitepress

by vuejs doticontypescriptdoticon

star image 3560 doticonMIT

Vite & Vue powered static site generator.

ruoyi-vue-pro

by YunaiV doticonjavadoticon

star image 3470 doticonMIT

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能。你的 ⭐️ Star ⭐️,是作者生发的动力!

Top Authors in Vue

1

egoist

66 Libraries

star icon16045

2

nuxt-community

63 Libraries

star icon20130

3

vuejs

58 Libraries

star icon440346

4

ktsn

42 Libraries

star icon4430

5

quasarframework

37 Libraries

star icon22539

6

PacktPublishing

34 Libraries

star icon1205

7

lmiller1990

26 Libraries

star icon296

8

vinayakkulkarni

25 Libraries

star icon602

9

eddyerburgh

24 Libraries

star icon1581

10

posva

22 Libraries

star icon8905

1

66 Libraries

star icon16045

2

63 Libraries

star icon20130

3

58 Libraries

star icon440346

4

42 Libraries

star icon4430

5

37 Libraries

star icon22539

6

34 Libraries

star icon1205

7

26 Libraries

star icon296

8

25 Libraries

star icon602

9

24 Libraries

star icon1581

10

22 Libraries

star icon8905

Trending Kits in Vue

No Trending Kits are available at this moment for Vue

Trending Discussions on Vue

What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?

Vue <script setup> Top level await causing template not to render

Horizontal full width with overflow in vertical flexbox

Apollo Client "Named export 'remove' not found"

Do I have to use the Composition API in Vue 3, or can I still do things the "Vue 2" way?

Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

NuxtLink is updating route in nuxt 3 app, but not rendering contents

Vue 3 and Vuetify 3 Alpha: ValidationError: progress plugin invalid options

Issue: Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

QUESTION

What exactly are the rules for configuring postcss.config.js (mainly with tailwndcss)?

Asked 2022-Mar-29 at 11:40

The number of variants that exist to showcase how postcss.config.js has to be configured is extremely confusing. There are examples (like the one at the tailwindcss documentation) that use this:

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8

then there are those which require the libraries:

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18

Others require external libs before they configure module.exports:

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30

and again some more that are necessary, when a configuration file that is not named according to the defaults has to be incorporated.

Today I get this error, when running yarn dev with a postcss.config.js as show in Example 2:

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35

When I remove the line with "tailwindcss", the same thing happens for "postcss-preset-env":

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40

When I then switch to a setup as shown in example 1, I get this error:

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43

I do use postcss 8.3.9!

This all happens in a project that was setup with vue-cli as a Vue2 project.

Which witch craft do I have to apply to make this setup work?

ANSWER

Answered 2021-Oct-26 at 14:58

In your terminal run the below command to install tailwind css and its dependencies via npm.

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44

It is possible to get the error message that you mentioned when you try to run the project

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45

Run the following code to uninstall previous installation and fix the error

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45npm uninstall tailwindcss postcss autoprefixer 
46npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
47

Next, you need to generate both Tailwind and PostCSS config files

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45npm uninstall tailwindcss postcss autoprefixer 
46npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
47npx tailwindcss init -p
48

Your config files should look like this

postcss.config file

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45npm uninstall tailwindcss postcss autoprefixer 
46npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
47npx tailwindcss init -p
48module.exports = {
49  plugins: {
50    tailwindcss: {},
51    autoprefixer: {},
52  },
53};
54

tailwindcss.config file

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45npm uninstall tailwindcss postcss autoprefixer 
46npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
47npx tailwindcss init -p
48module.exports = {
49  plugins: {
50    tailwindcss: {},
51    autoprefixer: {},
52  },
53};
54module.exports = {
55  future: {
56    // removeDeprecatedGapUtilities: true,
57    // purgeLayersByDefault: true,
58  },
59  purge: [],
60  theme: {
61    extend: {},
62  },
63  variants: {},
64  plugins: [],
65};
66

Finally, open up your main.js file and import the tailwind.css file containing the tailwind directives i.e

1// Example 1:
2module.exports = {
3  plugins: {
4    tailwindcss: {},
5    autoprefixer: {},
6  },
7}
8// Example 2:
9module.exports = {
10  plugins: {
11    require('tailwindcss'),
12    require('postcss-preset-env')({
13      stage: 0,
14      'nesting-rules': true
15    })
16  },
17}
18// Example 3:
19
20const tailwindcss = require('tailwindcss');
21const postcssPresetEnv = require('postcss-preset-env');
22
23
24module.exports = {
25  plugins: {
26    tailwindcss,
27    postcssPresetEnv
28  },
29}
30Syntax Error: /[path]/_pod-test/postcss.config.js:3
31    require('tailwindcss'),
32             ^^^^^^^^^^^
33
34SyntaxError: Unexpected string
35Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
36    require('postcss-preset-env')({
37            ^^^^^^^^^^^^^^^^^^^^
38
39SyntaxError: Unexpected string
40Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
41Migration guide for end-users:
42https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
43npm install tailwindcss postcss autoprefixer
44Error: PostCSS plugin tailwindcss requires PostCSS 8.
45npm uninstall tailwindcss postcss autoprefixer 
46npm install tailwindcss@npm:@tailwindcss/postcss7-compat@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
47npx tailwindcss init -p
48module.exports = {
49  plugins: {
50    tailwindcss: {},
51    autoprefixer: {},
52  },
53};
54module.exports = {
55  future: {
56    // removeDeprecatedGapUtilities: true,
57    // purgeLayersByDefault: true,
58  },
59  purge: [],
60  theme: {
61    extend: {},
62  },
63  variants: {},
64  plugins: [],
65};
66import './css/tailwind.css'
67

Source https://stackoverflow.com/questions/69725289

QUESTION

Vue <script setup> Top level await causing template not to render

Asked 2022-Mar-24 at 09:09

I'm using the new syntax in Vue 3 and I really like the idea of it, but once I tried to use a top level await I started to run in some problems.

This is my code:

1<template>
2  <div class="inventory">
3    <a class="btn btn-primary">Test button</a>
4      <table class="table">
5        <thead>
6          <tr>Name</tr>
7          <tr>Description</tr>
8        </thead>
9        <tbody>
10          <tr v-for="(item, key) in inventory" :key="key">
11            <td>{{ item.name }}</td>
12            <td>{{ item.description }}</td>
13          </tr>
14        </tbody>
15      </table>
16  </div>
17</template>
18
19<script setup lang="ts">
20import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'
21
22const inventory: GetInventoryResponse = await apiGetInventory()
23</script>
24

As you can see it's not that complicated, the apiGetInventory is just an axios call so I won't bother going into that. The problem is, that if I have this top level await, my template doesn't render anymore, it's just a blank page in my browser. If I remove the two lines of code, it works fine. Also the promise seems to revolve just fine, if I place a console.log(inventory) underneath it I get an array with objects all fine and dandy.

Anyone have a clue what's going wrong here?

ANSWER

Answered 2022-Mar-24 at 09:09

Top-level await must be used in combination with Suspense (which is experimental).

You should be able to just do it in onBeforeMount. Not as elegant; but a solid solution. Something like this:

1<template>
2  <div class="inventory">
3    <a class="btn btn-primary">Test button</a>
4      <table class="table">
5        <thead>
6          <tr>Name</tr>
7          <tr>Description</tr>
8        </thead>
9        <tbody>
10          <tr v-for="(item, key) in inventory" :key="key">
11            <td>{{ item.name }}</td>
12            <td>{{ item.description }}</td>
13          </tr>
14        </tbody>
15      </table>
16  </div>
17</template>
18
19<script setup lang="ts">
20import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'
21
22const inventory: GetInventoryResponse = await apiGetInventory()
23</script>
24<script setup lang="ts">
25import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory';
26import {ref, onBeforeMount} from 'vue';
27
28const inventory = ref<GetInventoryResponse>()
29
30onBeforeMount( async () => {
31    inventory.value = await apiGetInventory()
32})
33</script>
34

Source https://stackoverflow.com/questions/69183835

QUESTION

Horizontal full width with overflow in vertical flexbox

Asked 2022-Mar-20 at 07:17

I'm trying to create a flexbox that is both horizontally as vertically scrollable in case its needed. It's kind of a table layout in flexbox. In the picture below you can see the concept that I'm trying to achieve. This works correctly when the viewport is not too small or too short. Normal layout

We can then resize the viewport. This works correctly for the vertical overflow. A scrollbar appears and we can scroll downwards. This sadly doesn't work correctly horizontally. We also get a scrollbar for the horizontal part. But the yellow rows (with test) are not the full width I need it to be.

Issue in horizontal flexbox

1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32})
1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}
1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
81
82<body>
83  <div class="container" id="app">
84    <div class="header">
85      <div class="col">Col 1</div>
86      <div class="col">Col 2</div>
87      <div class="col">Col 3</div>
88      <div class="col">Col 4</div>
89      <div class="col">Col 5</div>
90      <div class="col">Col 6</div>
91      <div class="col">Col 7</div>
92      <div class="col">Col 8</div>
93      <div class="col">Col 9</div>
94    </div>
95    <div class="vertical-content">
96      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
97        <div>
98          {{ row.group }}
99        </div>
100        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
101          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
102        </div>
103      </div>
104    </div>
105  </div>
106</body>

In the fiddle click the yellow bars to expand a row with more content.

How can I make the yellow bars the full-width instead of partially?

ANSWER

Answered 2022-Mar-19 at 02:36

Every red and blue cells have a minimal width (with flex-basis and flex-shrink: 0) but not the yellow.

The yellow are using the largest width possible for them, but the others are going out their container.

In this situation, the simplest way to "fix" it is to set a minimal width to the yellow bars too.

A small example (with variables to simplify maintainability)

Diff:

1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
81
82<body>
83  <div class="container" id="app">
84    <div class="header">
85      <div class="col">Col 1</div>
86      <div class="col">Col 2</div>
87      <div class="col">Col 3</div>
88      <div class="col">Col 4</div>
89      <div class="col">Col 5</div>
90      <div class="col">Col 6</div>
91      <div class="col">Col 7</div>
92      <div class="col">Col 8</div>
93      <div class="col">Col 9</div>
94    </div>
95    <div class="vertical-content">
96      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
97        <div>
98          {{ row.group }}
99        </div>
100        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
101          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
102        </div>
103      </div>
104    </div>
105  </div>
106</body>:root {
107  --nb-cells: 9;
108  --cell-width: 100px;
109}
110
111.container {
112  box-sizing: border-box;
113}
114
115.header .col,
116.vertical-content .row .col {
117  box-sizing: border-box;
118  flex-basis: var(--cell-width);
119}
120
121.vertical-content .grouped-row {
122  box-sizing: border-box;
123  min-width: calc(var(--cell-width) * var(--nb-cells));
124}
125

Full test

1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
81
82<body>
83  <div class="container" id="app">
84    <div class="header">
85      <div class="col">Col 1</div>
86      <div class="col">Col 2</div>
87      <div class="col">Col 3</div>
88      <div class="col">Col 4</div>
89      <div class="col">Col 5</div>
90      <div class="col">Col 6</div>
91      <div class="col">Col 7</div>
92      <div class="col">Col 8</div>
93      <div class="col">Col 9</div>
94    </div>
95    <div class="vertical-content">
96      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
97        <div>
98          {{ row.group }}
99        </div>
100        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
101          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
102        </div>
103      </div>
104    </div>
105  </div>
106</body>:root {
107  --nb-cells: 9;
108  --cell-width: 100px;
109}
110
111.container {
112  box-sizing: border-box;
113}
114
115.header .col,
116.vertical-content .row .col {
117  box-sizing: border-box;
118  flex-basis: var(--cell-width);
119}
120
121.vertical-content .grouped-row {
122  box-sizing: border-box;
123  min-width: calc(var(--cell-width) * var(--nb-cells));
124}
125const groups = [];
126for (let i = 0; i < 15; i++) {
127  const rows = [];
128  for (let j = 0; j < 15; j++) {
129    rows.push({
130      cols: [
131        "col 1",
132        "col 2",
133        "col 3",
134        "col 4",
135        "col 5",
136        "col 6",
137        "col 7",
138        "col 8",
139        "col 9",
140      ]
141    });
142  }
143
144  groups.push({
145    group: 'test' + i,
146    open: false,
147    rows
148  });
149}
150
151var app = new Vue({
152  el: '#app',
153  data: {
154    rows: groups
155  }
156})
1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
81
82<body>
83  <div class="container" id="app">
84    <div class="header">
85      <div class="col">Col 1</div>
86      <div class="col">Col 2</div>
87      <div class="col">Col 3</div>
88      <div class="col">Col 4</div>
89      <div class="col">Col 5</div>
90      <div class="col">Col 6</div>
91      <div class="col">Col 7</div>
92      <div class="col">Col 8</div>
93      <div class="col">Col 9</div>
94    </div>
95    <div class="vertical-content">
96      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
97        <div>
98          {{ row.group }}
99        </div>
100        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
101          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
102        </div>
103      </div>
104    </div>
105  </div>
106</body>:root {
107  --nb-cells: 9;
108  --cell-width: 100px;
109}
110
111.container {
112  box-sizing: border-box;
113}
114
115.header .col,
116.vertical-content .row .col {
117  box-sizing: border-box;
118  flex-basis: var(--cell-width);
119}
120
121.vertical-content .grouped-row {
122  box-sizing: border-box;
123  min-width: calc(var(--cell-width) * var(--nb-cells));
124}
125const groups = [];
126for (let i = 0; i < 15; i++) {
127  const rows = [];
128  for (let j = 0; j < 15; j++) {
129    rows.push({
130      cols: [
131        "col 1",
132        "col 2",
133        "col 3",
134        "col 4",
135        "col 5",
136        "col 6",
137        "col 7",
138        "col 8",
139        "col 9",
140      ]
141    });
142  }
143
144  groups.push({
145    group: 'test' + i,
146    open: false,
147    rows
148  });
149}
150
151var app = new Vue({
152  el: '#app',
153  data: {
154    rows: groups
155  }
156}):root {
157  --nb-cells: 9;
158  --cell-width: 100px;
159}
160
161.container {
162  display: flex;
163  flex-direction: column;
164  min-height: 100vh;
165  min-width: 100vh;
166  box-sizing: border-box;
167}
168
169.header {
170  position: sticky;
171  top: 0;
172  display: flex;
173  flex-direction: row;
174}
175
176.header .col {
177  flex-basis: var(--cell-width);
178  flex-grow: 1;
179  flex-shrink: 0;
180  background: red;
181  padding: 0 2px;
182  border: 2px solid black;
183  box-sizing: border-box;
184}
185
186.vertical-content {
187  display: flex;
188  flex-direction: column;
189}
190
191.vertical-content .grouped-row {
192  flex-grow: 1;
193  background: yellow;
194  border: 2px solid black;
195  display: flex;
196  flex-direction: column;
197  min-width: calc(var(--cell-width) * var(--nb-cells));
198  box-sizing: border-box;
199}
200
201.vertical-content .row {
202  display: flex;
203  flex-direction: row;
204}
205
206.vertical-content .row .col {
207  flex-basis: var(--cell-width);
208  flex-grow: 1;
209  flex-shrink: 0;
210  background: blue;
211  padding: 0 2px;
212  border: 2px solid black;
213  box-sizing: border-box;
214}
1const groups = [];
2for (let i = 0; i < 15; i++) {
3  const rows = [];
4  for (let j = 0; j < 15; j++) {
5    rows.push({
6      cols: [
7        "col 1",
8        "col 2",
9        "col 3",
10        "col 4",
11        "col 5",
12        "col 6",
13        "col 7",
14        "col 8",
15        "col 9",
16      ]
17    });
18  }
19
20  groups.push({
21    group: 'test' + i,
22    open: false,
23    rows
24  });
25}
26
27var app = new Vue({
28  el: '#app',
29  data: {
30    rows: groups
31  }
32}).container {
33  display: flex;
34  flex-direction: column;
35  min-height: 100vh;
36  min-width: 100vh;
37}
38
39.header {
40  position: sticky;
41  top: 0;
42  display: flex;
43  flex-direction: row;
44}
45
46.header .col {
47  flex-basis: 100px;
48  flex-grow: 1;
49  flex-shrink: 0;
50  background: red;
51  padding: 0 2px;
52  border: 2px solid black;
53}
54
55.vertical-content {
56  display: flex;
57  flex-direction: column;
58}
59
60.vertical-content .grouped-row {
61  flex-grow: 1;
62  background: yellow;
63  border: 2px solid black;
64  display: flex;
65  flex-direction: column;
66}
67
68.vertical-content .row {
69  display: flex;
70  flex-direction: row;
71}
72
73.vertical-content .row .col {
74  flex-basis: 100px;
75  flex-grow: 1;
76  flex-shrink: 0;
77  background: blue;
78  padding: 0 2px;
79  border: 2px solid black;
80}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
81
82<body>
83  <div class="container" id="app">
84    <div class="header">
85      <div class="col">Col 1</div>
86      <div class="col">Col 2</div>
87      <div class="col">Col 3</div>
88      <div class="col">Col 4</div>
89      <div class="col">Col 5</div>
90      <div class="col">Col 6</div>
91      <div class="col">Col 7</div>
92      <div class="col">Col 8</div>
93      <div class="col">Col 9</div>
94    </div>
95    <div class="vertical-content">
96      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
97        <div>
98          {{ row.group }}
99        </div>
100        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
101          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
102        </div>
103      </div>
104    </div>
105  </div>
106</body>:root {
107  --nb-cells: 9;
108  --cell-width: 100px;
109}
110
111.container {
112  box-sizing: border-box;
113}
114
115.header .col,
116.vertical-content .row .col {
117  box-sizing: border-box;
118  flex-basis: var(--cell-width);
119}
120
121.vertical-content .grouped-row {
122  box-sizing: border-box;
123  min-width: calc(var(--cell-width) * var(--nb-cells));
124}
125const groups = [];
126for (let i = 0; i < 15; i++) {
127  const rows = [];
128  for (let j = 0; j < 15; j++) {
129    rows.push({
130      cols: [
131        "col 1",
132        "col 2",
133        "col 3",
134        "col 4",
135        "col 5",
136        "col 6",
137        "col 7",
138        "col 8",
139        "col 9",
140      ]
141    });
142  }
143
144  groups.push({
145    group: 'test' + i,
146    open: false,
147    rows
148  });
149}
150
151var app = new Vue({
152  el: '#app',
153  data: {
154    rows: groups
155  }
156}):root {
157  --nb-cells: 9;
158  --cell-width: 100px;
159}
160
161.container {
162  display: flex;
163  flex-direction: column;
164  min-height: 100vh;
165  min-width: 100vh;
166  box-sizing: border-box;
167}
168
169.header {
170  position: sticky;
171  top: 0;
172  display: flex;
173  flex-direction: row;
174}
175
176.header .col {
177  flex-basis: var(--cell-width);
178  flex-grow: 1;
179  flex-shrink: 0;
180  background: red;
181  padding: 0 2px;
182  border: 2px solid black;
183  box-sizing: border-box;
184}
185
186.vertical-content {
187  display: flex;
188  flex-direction: column;
189}
190
191.vertical-content .grouped-row {
192  flex-grow: 1;
193  background: yellow;
194  border: 2px solid black;
195  display: flex;
196  flex-direction: column;
197  min-width: calc(var(--cell-width) * var(--nb-cells));
198  box-sizing: border-box;
199}
200
201.vertical-content .row {
202  display: flex;
203  flex-direction: row;
204}
205
206.vertical-content .row .col {
207  flex-basis: var(--cell-width);
208  flex-grow: 1;
209  flex-shrink: 0;
210  background: blue;
211  padding: 0 2px;
212  border: 2px solid black;
213  box-sizing: border-box;
214}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
215
216<body>
217  <div class="container" id="app">
218    <div class="header">
219      <div class="col">Col 1</div>
220      <div class="col">Col 2</div>
221      <div class="col">Col 3</div>
222      <div class="col">Col 4</div>
223      <div class="col">Col 5</div>
224      <div class="col">Col 6</div>
225      <div class="col">Col 7</div>
226      <div class="col">Col 8</div>
227      <div class="col">Col 9</div>
228    </div>
229    <div class="vertical-content">
230      <div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
231        <div>
232          {{ row.group }}
233        </div>
234        <div class="row" v-for="actualRow of row.rows" v-if="row.open">
235          <div class="col" v-for="col of actualRow.cols">{{ col }}</div>
236        </div>
237      </div>
238    </div>
239  </div>
240</body>

Source https://stackoverflow.com/questions/71495691

QUESTION

Apollo Client "Named export 'remove' not found"

Asked 2022-Mar-12 at 09:45

I'm attempting to create an apollo client plugin for a Nuxt 3 application. It's currently throwing an error regarding a package called ts-invariant:

1file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
2import { remove } from "ts-invariant/process/index.js";
3         ^^^^^^
4SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
5CommonJS modules can always be imported via the default export, for example using:
6
7import pkg from 'ts-invariant/process/index.js';
8const { remove } = pkg;
9
10    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
12    at async Promise.all (index 0)
13    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
14    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
15[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
16  at file://./.nuxt/dist/server/server.mjs:3170:289  
17  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)
18

I feel like I know enough about this error to know it has something to do with how Nuxt 3 deals with ESM, but I can't be for certain.

Here's the nuxt plugin:
plugins/apollo-client.js

1file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
2import { remove } from "ts-invariant/process/index.js";
3         ^^^^^^
4SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
5CommonJS modules can always be imported via the default export, for example using:
6
7import pkg from 'ts-invariant/process/index.js';
8const { remove } = pkg;
9
10    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
12    at async Promise.all (index 0)
13    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
14    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
15[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
16  at file://./.nuxt/dist/server/server.mjs:3170:289  
17  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)
18import { defineNuxtPlugin } from "#app"
19import { ApolloClient, InMemoryCache } from "@apollo/client/core"
20import { DefaultApolloClient } from "@vue/apollo-composable"
21
22export default defineNuxtPlugin((nuxtApp) => {
23  const config = useRuntimeConfig()
24  const apolloClient = new ApolloClient({
25    uri: config.PUBLIC_API_ENDPOINT,
26    cache: new InMemoryCache(),
27  })
28  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
29})
30

In a normal scenario, I might use the nuxt-apollo community module, but it is currently afk regarding a nuxt 3 port, so a plugin it is.

Here's some documentation I relied on for my plugin:
https://v4.apollo.vuejs.org/guide-composable/setup.html#vue-3
https://v3.nuxtjs.org/docs/directory-structure/plugins

ANSWER

Answered 2022-Jan-07 at 01:52

Solved by including @apollo/client and ts-invariant/process into the nuxt build transpile like so:

1file:///Users/[my name]/Repositories/[project]/node_modules/@apollo/client/utilities/globals/fix-graphql.js:1
2import { remove } from "ts-invariant/process/index.js";
3         ^^^^^^
4SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
5CommonJS modules can always be imported via the default export, for example using:
6
7import pkg from 'ts-invariant/process/index.js';
8const { remove } = pkg;
9
10    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
11    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
12    at async Promise.all (index 0)
13    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
14    at async __instantiateModule__ (file:///Users/[my name]/Repositories/[project]/.nuxt/dist/server/server.mjs:4550:3)
15[vite dev] Error loading external "/Users/[my name]/Repositories/[project]/node_modules/@apollo/client/core/index.js".
16  at file://./.nuxt/dist/server/server.mjs:3170:289  
17  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:4550:3)
18import { defineNuxtPlugin } from "#app"
19import { ApolloClient, InMemoryCache } from "@apollo/client/core"
20import { DefaultApolloClient } from "@vue/apollo-composable"
21
22export default defineNuxtPlugin((nuxtApp) => {
23  const config = useRuntimeConfig()
24  const apolloClient = new ApolloClient({
25    uri: config.PUBLIC_API_ENDPOINT,
26    cache: new InMemoryCache(),
27  })
28  nuxtApp.vueApp.provide(DefaultApolloClient, apolloClient)
29})
30  // nuxt.config.js
31  // ...
32  build: {
33    postcss: {
34      postcssOptions: require('./postcss.config.js')
35    },
36    transpile: [
37      '@apollo/client',
38      'ts-invariant/process',
39    ],
40  },
41  // ...
42

Source https://stackoverflow.com/questions/70615613

QUESTION

Do I have to use the Composition API in Vue 3, or can I still do things the "Vue 2" way?

Asked 2022-Mar-07 at 03:01

Is it possible to install Vue 3, but still do things the "Vue 2" way? In other words, I see that Vue 3 has the new Composition API, but is that optional or the required way of doing things in Vue 3?

For some reason, I was thinking that Vue 3 still allowed you to do things the Vue-2 way, using the Options API instead. Is that not the case? Thanks.

ANSWER

Answered 2022-Mar-07 at 03:01

Vue 3 does not require using the Composition API. The Options API is still available and will not be removed, as explained by two Vue core team members:

Thorsten Lünborg in Vue 3: Data down, Events up (19-MAY-2020):

IMPORTANT: The composition API is additive, it’s a new feature, but it doesn’t and will not replace the good ole “Options API” you know and love from Vue 1 and 2. Just consider this new API as another tool in your toolbox that may come in handy in certain situations that feel a little clumsy to solve with the Options API.

Ben Hong in Enjoy the Vue #48: "New in Vue 3: The Composition API" (19-JAN-2021):

[00:01:03] T: Yeah. Well, the first thing I remember hearing was that it was replacing the options API.

[00:01:08] BH: Big disclaimer. That isn’t happening. Big disclaimer.

...

[00:09:10] BH: [...] this is not something you need to go and rewrite your app in. [...] the composition API is not like, drop the options do composition. It's an additive thing that when you have a problem that it can solve, it's really great for that.

An early RFC for the Composition API had only considered deprecating the Options API:

A previous draft of this RFC indicated that there is the possibility of deprecating a number of 2.x options in a future major release, which has been redacted based on user feedback.

The Vue docs also confirm this:

Will Options API be deprecated?

No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.

Source https://stackoverflow.com/questions/68611657

QUESTION

Vue 3 passing array warning: Extraneous non-props attributes were passed to component but could not be automatically inherited

Asked 2022-Feb-26 at 21:48

please, I'm learning a VueJS 3 and I have probably begineer problem. I have warn in browser developer console like this one:

enter image description here

The Message is:

1[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
2

I'm passing array of objects to the child Component. In my parent views/Home.vue compoment I have this implemenation:

1[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
2<template>
3  <div class="wrapper">
4    <section v-for="(item, index) in items" :key="index" class="box">
5      <ItemProperties class="infobox-item-properties" :info="item.properties" />
6    </section>
7  </div>
8</template>
9<script>
10import { ref } from 'vue'
11import { data } from '@/data.js'
12import ItemProperties from '@/components/ItemProperties.vue'
13
14export default {
15  components: {
16    ItemDescription,
17  },
18  setup() {
19    const items = ref(data)
20
21    return {
22      items,
23    }
24  },
25</script>
26

In child compoment components/ItemProperties.vue I have this code:

1[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
2<template>
3  <div class="wrapper">
4    <section v-for="(item, index) in items" :key="index" class="box">
5      <ItemProperties class="infobox-item-properties" :info="item.properties" />
6    </section>
7  </div>
8</template>
9<script>
10import { ref } from 'vue'
11import { data } from '@/data.js'
12import ItemProperties from '@/components/ItemProperties.vue'
13
14export default {
15  components: {
16    ItemDescription,
17  },
18  setup() {
19    const items = ref(data)
20
21    return {
22      items,
23    }
24  },
25</script>
26<template>
27  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">
28    <span class="infobox-item-title">{{ object.name }}:</span>
29    <span v-if="object.type === 'rating'">
30      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>
31    </span>
32    <span v-else>
33      <span>{{ object.value }}</span>
34    </span>
35  </div>
36</template>
37
38<script>
39export default {
40  props: {
41    info: {
42      type: Array,
43      required: false,
44      default: () => [
45        {
46          name: '',
47          value: '',
48          type: 'string',
49          icon: '',
50        },
51      ],
52    },
53  },
54}
55</script>
56

It doesn't matter if I have default() function or not. Also doesn't matter if I have v-if condition or not. If I have cycle in the Array, I got this warning

Data are in data.js file. The part of file is here:

1[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
2<template>
3  <div class="wrapper">
4    <section v-for="(item, index) in items" :key="index" class="box">
5      <ItemProperties class="infobox-item-properties" :info="item.properties" />
6    </section>
7  </div>
8</template>
9<script>
10import { ref } from 'vue'
11import { data } from '@/data.js'
12import ItemProperties from '@/components/ItemProperties.vue'
13
14export default {
15  components: {
16    ItemDescription,
17  },
18  setup() {
19    const items = ref(data)
20
21    return {
22      items,
23    }
24  },
25</script>
26<template>
27  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">
28    <span class="infobox-item-title">{{ object.name }}:</span>
29    <span v-if="object.type === 'rating'">
30      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>
31    </span>
32    <span v-else>
33      <span>{{ object.value }}</span>
34    </span>
35  </div>
36</template>
37
38<script>
39export default {
40  props: {
41    info: {
42      type: Array,
43      required: false,
44      default: () => [
45        {
46          name: '',
47          value: '',
48          type: 'string',
49          icon: '',
50        },
51      ],
52    },
53  },
54}
55</script>
56export const data = [
57  {
58    title: 'White shirt',
59    properties: [
60      { name: 'Material', value: 'Cotton', type: 'string', icon: '' },
61      { name: 'Size', value: 'M', type: 'string', icon: '' },
62      { name: 'Count', value: 4, type: 'number', icon: '' },
63      { name: 'Absorption', value: 4, type: 'rating', icon: '💧' },
64      { name: 'Rating', value: 2, type: 'rating', icon: '⭐️' },
65      { name: 'Confort', value: 2, type: 'rating', icon: '🛏' },
66      { name: 'Sleeves', value: 'Short', type: 'string', icon: '' },
67      { name: 'Color', value: 'White', type: 'string', icon: '' },
68    ],
69  },
70]
71

PS: Application works but I'm afraid about that warning. What can I do please like right way?

I will be glad for any advice. Thank you very much.

ANSWER

Answered 2021-Aug-16 at 13:32

The ItemProperties component has multiple root nodes because it renders a list in the root with v-for.

Based on the class name (infobox-item-properties), I think you want the class to be applied to a container element, so a simple solution is to just add that element (e.g., a div) in your component at the root:

1[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
2<template>
3  <div class="wrapper">
4    <section v-for="(item, index) in items" :key="index" class="box">
5      <ItemProperties class="infobox-item-properties" :info="item.properties" />
6    </section>
7  </div>
8</template>
9<script>
10import { ref } from 'vue'
11import { data } from '@/data.js'
12import ItemProperties from '@/components/ItemProperties.vue'
13
14export default {
15  components: {
16    ItemDescription,
17  },
18  setup() {
19    const items = ref(data)
20
21    return {
22      items,
23    }
24  },
25</script>
26<template>
27  <div class="infobox-item-property" v-for="(object, index) in info" :key="index">
28    <span class="infobox-item-title">{{ object.name }}:</span>
29    <span v-if="object.type === 'rating'">
30      <span v-for="(v, k) in object.value" :key="k">{{ object.icon }}</span>
31    </span>
32    <span v-else>
33      <span>{{ object.value }}</span>
34    </span>
35  </div>
36</template>
37
38<script>
39export default {
40  props: {
41    info: {
42      type: Array,
43      required: false,
44      default: () => [
45        {
46          name: '',
47          value: '',
48          type: 'string',
49          icon: '',
50        },
51      ],
52    },
53  },
54}
55</script>
56export const data = [
57  {
58    title: 'White shirt',
59    properties: [
60      { name: 'Material', value: 'Cotton', type: 'string', icon: '' },
61      { name: 'Size', value: 'M', type: 'string', icon: '' },
62      { name: 'Count', value: 4, type: 'number', icon: '' },
63      { name: 'Absorption', value: 4, type: 'rating', icon: '💧' },
64      { name: 'Rating', value: 2, type: 'rating', icon: '⭐️' },
65      { name: 'Confort', value: 2, type: 'rating', icon: '🛏' },
66      { name: 'Sleeves', value: 'Short', type: 'string', icon: '' },
67      { name: 'Color', value: 'White', type: 'string', icon: '' },
68    ],
69  },
70]
71// ItemProperties.vue
72<template>
73  <div>
74    <section v-for="(item, index) in items" :key="index" class="box">
75    ...
76    </section>
77  </div>
78</template>
79

Source https://stackoverflow.com/questions/68803137

QUESTION

Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:

Asked 2022-Feb-26 at 09:58

I have webpack-cli installed on my laravel project. I don't know why first of all we need it to run my vue app but this is causing an error:

When I run npm run dev or npm run hot

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39

Vue is installed also vue-loader, can't understand why it can't find those files. Also, I looked at the node_modules everything is in there ...

ANSWER

Answered 2021-Dec-20 at 09:04

You need to update your vue-loader

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40

And if it is not installed, install it

1[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
2Require stack:
3- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js
4- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin.js
5- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\index.js
6- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\Vue.js
7- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\components\ComponentRegistrar.js
8- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\src\Mix.js
9- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\laravel-mix\setup\webpack.config.js
10- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\webpack-cli.js
11- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\lib\bootstrap.js
12- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack-cli\bin\cli.js
13- C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\webpack\bin\webpack.js
14    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
15    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
16    at Module.require (internal/modules/cjs/loader.js:974:19)
17    at require (internal/modules/cjs/helpers.js:93:18)
18    at Object.<anonymous> (C:\Users\Viruss\Desktop\test-meme-library\meme-library\node_modules\vue-loader\lib\plugin-webpack5.js:6:42)
19    at Module._compile (internal/modules/cjs/loader.js:1085:14)
20    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
21    at Module.load (internal/modules/cjs/loader.js:950:32)
22    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
23    at Module.require (internal/modules/cjs/loader.js:974:19) {
24  code: 'MODULE_NOT_FOUND',
25  requireStack: [
26    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin-webpack5.js',
27    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\plugin.js',
28    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\vue-loader\\lib\\index.js',
29    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\Vue.js',
30    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js',
31    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\src\\Mix.js',
32    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\laravel-mix\\setup\\webpack.config.js',
33    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\webpack-cli.js',
34    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\lib\\bootstrap.js',
35    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack-cli\\bin\\cli.js',
36    'C:\\Users\\Viruss\\Desktop\\test-meme-library\\meme-library\\node_modules\\webpack\\bin\\webpack.js'
37  ]
38}
39npm update vue-loader
40npm i vue-loader
41

Source https://stackoverflow.com/questions/69631437

QUESTION

NuxtLink is updating route in nuxt 3 app, but not rendering contents

Asked 2022-Feb-25 at 18:25

I am trying to use route using NuxtLink in a Nuxt 3 app, and it's changing the route, but it's not showing any contents. But, if I refresh or reload the updated route which was blank ago, then it's showing it's content normally.

/pages/index.vue

1<template>
2  <div>
3    <h1>It's Nuxt3!</h1>
4    <p>Home Page</p>
5  </div>
6  <NuxtLink to="/user">User</NuxtLink>
7</template>
8
9

/pages/user.vue

1<template>
2  <div>
3    <h1>It's Nuxt3!</h1>
4    <p>Home Page</p>
5  </div>
6  <NuxtLink to="/user">User</NuxtLink>
7</template>
8
9<template>
10  <div>
11    <h1>It's Nuxt3!</h1>
12    <p>User Page</p>
13  </div>
14</template>
15

Folder Structure & Illustration:

Folder Structure

Illustration

ANSWER

Answered 2022-Feb-25 at 18:25

The console warning from Vue provides a helpful hint:

1<template>
2  <div>
3    <h1>It's Nuxt3!</h1>
4    <p>Home Page</p>
5  </div>
6  <NuxtLink to="/user">User</NuxtLink>
7</template>
8
9<template>
10  <div>
11    <h1>It's Nuxt3!</h1>
12    <p>User Page</p>
13  </div>
14</template>
15[Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 
16  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< VueInstance > key="/" > 
17  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
18  at <Transition name="page" mode="out-in" > 
19  at <NuxtLayout key=0 name=undefined > 
20  at <RouterView> 
21  at <NuxtPage> 
22  at <App> 
23  at <NuxtRoot>
24

The log points to <Index> (i.e., index.vue), and we see that the component there has two root nodes, which Vue wraps together in a fragment node, leading to the "non-element root node" warning:

1&lt;template&gt;
2  &lt;div&gt;
3    &lt;h1&gt;It's Nuxt3!&lt;/h1&gt;
4    &lt;p&gt;Home Page&lt;/p&gt;
5  &lt;/div&gt;
6  &lt;NuxtLink to=&quot;/user&quot;&gt;User&lt;/NuxtLink&gt;
7&lt;/template&gt;
8
9&lt;template&gt;
10  &lt;div&gt;
11    &lt;h1&gt;It's Nuxt3!&lt;/h1&gt;
12    &lt;p&gt;User Page&lt;/p&gt;
13  &lt;/div&gt;
14&lt;/template&gt;
15[Vue warn]: Component inside &lt;Transition&gt; renders non-element root node that cannot be animated. 
16  at &lt;Index onVnodeUnmounted=fn&lt;onVnodeUnmounted&gt; ref=Ref&lt; VueInstance &gt; key=&quot;/&quot; &gt; 
17  at &lt;BaseTransition mode=&quot;out-in&quot; appear=false persisted=false  ... &gt; 
18  at &lt;Transition name=&quot;page&quot; mode=&quot;out-in&quot; &gt; 
19  at &lt;NuxtLayout key=0 name=undefined &gt; 
20  at &lt;RouterView&gt; 
21  at &lt;NuxtPage&gt; 
22  at &lt;App&gt; 
23  at &lt;NuxtRoot&gt;
24&lt;template&gt;
25  &lt;div&gt; 1️⃣ &lt;!-- root node --&gt;
26    &lt;h1&gt;Hello, World&lt;/h1&gt;
27    &lt;p&gt;It's Nuxt3!&lt;/p&gt;
28  &lt;/div&gt;
29  &lt;NuxtLink to=&quot;/user&quot;&gt;User&lt;/NuxtLink&gt; 2️⃣ &lt;!-- root node --&gt;
30&lt;/template&gt;
31

Technically, this should be supported in Nuxt 3, which uses Vue 3, which supports multiple root nodes, but I'm not sure why that's not allowed in this scenario.

A workaround is to wrap the component's template with a single element, such as a div:

1&lt;template&gt;
2  &lt;div&gt;
3    &lt;h1&gt;It's Nuxt3!&lt;/h1&gt;
4    &lt;p&gt;Home Page&lt;/p&gt;
5  &lt;/div&gt;
6  &lt;NuxtLink to=&quot;/user&quot;&gt;User&lt;/NuxtLink&gt;
7&lt;/template&gt;
8
9&lt;template&gt;
10  &lt;div&gt;
11    &lt;h1&gt;It's Nuxt3!&lt;/h1&gt;
12    &lt;p&gt;User Page&lt;/p&gt;
13  &lt;/div&gt;
14&lt;/template&gt;
15[Vue warn]: Component inside &lt;Transition&gt; renders non-element root node that cannot be animated. 
16  at &lt;Index onVnodeUnmounted=fn&lt;onVnodeUnmounted&gt; ref=Ref&lt; VueInstance &gt; key=&quot;/&quot; &gt; 
17  at &lt;BaseTransition mode=&quot;out-in&quot; appear=false persisted=false  ... &gt; 
18  at &lt;Transition name=&quot;page&quot; mode=&quot;out-in&quot; &gt; 
19  at &lt;NuxtLayout key=0 name=undefined &gt; 
20  at &lt;RouterView&gt; 
21  at &lt;NuxtPage&gt; 
22  at &lt;App&gt; 
23  at &lt;NuxtRoot&gt;
24&lt;template&gt;
25  &lt;div&gt; 1️⃣ &lt;!-- root node --&gt;
26    &lt;h1&gt;Hello, World&lt;/h1&gt;
27    &lt;p&gt;It's Nuxt3!&lt;/p&gt;
28  &lt;/div&gt;
29  &lt;NuxtLink to=&quot;/user&quot;&gt;User&lt;/NuxtLink&gt; 2️⃣ &lt;!-- root node --&gt;
30&lt;/template&gt;
31// index.vue
32&lt;template&gt;
33  &lt;div&gt; 👈 &lt;!-- single root node --&gt;
34    &lt;div&gt;
35      &lt;h1&gt;Hello, World&lt;/h1&gt;
36      &lt;p&gt;It's Nuxt3!&lt;/p&gt;
37    &lt;div&gt;
38    &lt;NuxtLink to=&quot;/user&quot;&gt;User&lt;/NuxtLink&gt;
39  &lt;/div&gt;
40&lt;/template&gt;
41

Source https://stackoverflow.com/questions/70396414

QUESTION

Vue 3 and Vuetify 3 Alpha: ValidationError: progress plugin invalid options

Asked 2022-Feb-14 at 09:55

After creating a Vue 3 project, adding Vuetify 3 Alpha, when I run "npm run serve", this is the error I get. I tried without adding Vuetify 3 Alpha and the Vue 3 project starts fine, it's just after adding the Vuetify that the error appears.

1INFO  Starting development server...
2ERROR  ValidationError: Progress Plugin Invalid Options
3
4    options should NOT have additional properties
5    options should NOT have additional properties
6    options should NOT have additional properties
7    options should pass &quot;instanceof&quot; keyword validation
8    options should match exactly one schema in oneOf
9
10ValidationError: Progress Plugin Invalid Options
11
12options should NOT have additional properties
13options should NOT have additional properties
14options should NOT have additional properties
15options should pass &quot;instanceof&quot; keyword validation
16options should match exactly one schema in oneOf
17
18at validateOptions (c:\wamp64\www\vuetify-3\node_modules\webpack\node_modules\schema-utils\src\validateOptions.js:32:11)
19at new ProgressPlugin (c:\wamp64\www\vuetify-3\node_modules\webpack\lib\ProgressPlugin.js:62:3)
20at new Progress (c:\wamp64\www\vuetify-3\node_modules\progress-webpack-plugin\index.js:25:21)
21at new progressPlugin (c:\wamp64\www\vuetify-3\node_modules\progress-webpack-plugin\index.js:127:10)
22at c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Plugin.js:14:18
23at Object.toConfig (c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Plugin.js:78:22)
24at c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Config.js:129:63
25at Array.map (&lt;anonymous&gt;)
26at module.exports.toConfig (c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Config.js:129:40)
27at Service.resolveWebpackConfig (c:\wamp64\www\vuetify-3\node_modules\@vue\cli-service\lib\Service.js:261:34)
28

ANSWER

Answered 2021-Nov-15 at 03:41

I had the same error after running vue add vuetify

Run npm update and re-create the project again.

Also make sure you are on the latest versions of the following.

1INFO  Starting development server...
2ERROR  ValidationError: Progress Plugin Invalid Options
3
4    options should NOT have additional properties
5    options should NOT have additional properties
6    options should NOT have additional properties
7    options should pass &quot;instanceof&quot; keyword validation
8    options should match exactly one schema in oneOf
9
10ValidationError: Progress Plugin Invalid Options
11
12options should NOT have additional properties
13options should NOT have additional properties
14options should NOT have additional properties
15options should pass &quot;instanceof&quot; keyword validation
16options should match exactly one schema in oneOf
17
18at validateOptions (c:\wamp64\www\vuetify-3\node_modules\webpack\node_modules\schema-utils\src\validateOptions.js:32:11)
19at new ProgressPlugin (c:\wamp64\www\vuetify-3\node_modules\webpack\lib\ProgressPlugin.js:62:3)
20at new Progress (c:\wamp64\www\vuetify-3\node_modules\progress-webpack-plugin\index.js:25:21)
21at new progressPlugin (c:\wamp64\www\vuetify-3\node_modules\progress-webpack-plugin\index.js:127:10)
22at c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Plugin.js:14:18
23at Object.toConfig (c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Plugin.js:78:22)
24at c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Config.js:129:63
25at Array.map (&lt;anonymous&gt;)
26at module.exports.toConfig (c:\wamp64\www\vuetify-3\node_modules\webpack-chain\src\Config.js:129:40)
27at Service.resolveWebpackConfig (c:\wamp64\www\vuetify-3\node_modules\@vue\cli-service\lib\Service.js:261:34)
28node -v &amp;&amp; vue -V &amp;&amp; npm -v
29
  • v17.0.1
  • @vue/cli 5.0.0-rc.0
  • 8.1.0

Source https://stackoverflow.com/questions/69931346

QUESTION

Issue: Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

Asked 2022-Feb-09 at 00:16

I started a new project in vue.js. I added navbar. At one point, I noticed issue in the console:

1Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
2

enter image description here

I don't understand this, because I don't use any navigator in the project.

Why am I seeing this issue? How can I change it?

ANSWER

Answered 2021-Sep-01 at 19:14

https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html

Is helpful to read. Some key points:

"Beginning in M92, we plan to start sending deprecation notices for the navigator.userAgent, navigator.appVersion, and navigator.platform getters in the DevTools Issues tab."

"If your site, service, library or application relies on certain bits of information being present in the User Agent string such as Chrome minor version, OS version number, or Android device model, you will need to begin the migration to use the User Agent Client Hints API instead."

I know I am not using the navigator getters in question so at this point, it seems I can only wait for an update to the library's .js (in my case, bootstrap 4) to make the warning go away.

Source https://stackoverflow.com/questions/68982181

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Vue

Tutorials and Learning Resources are not available at this moment for Vue

Share this Page

share link

Get latest updates on Vue