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 
javascript
192954 MIT
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
storybook
by storybookjs typescript
70458 MIT
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
nuxt.js
by nuxt javascript
39155 NOASSERTION
The Intuitive Vue(2) Framework
uni-app
by dcloudio javascript
36431 Apache-2.0
uni-app 是使用 Vue 语法开发小程序、H5、App的统一框架
vuetify
by vuetifyjs typescript
34010 MIT
🐉 Material Component Framework for Vue
clipboard.js
by zenorocha javascript
32045 MIT
:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:
taro
by NervJS typescript
30875 MIT
开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
vue-cli
by vuejs javascript
29130 MIT
🛠️ webpack-based tooling for Vue.js Development
jeecg-boot
by jeecgboot java
28804 Apache-2.0
「企业级低代码平台」前后端分离架构SpringBoot 2.x，SpringCloud，Ant Design&Vue，Mybatis，Shiro，JWT。强大的代码生成器让前后端代码一键生成，无需写任何代码! 引领新的开发模式OnlineCoding->代码生成->手工MERGE，帮助Java项目解决70%重复工作，让开发更关注业务，既能快速提高效率，帮助公司节省成本，同时又不失灵活性。
Trending New libraries in Vue
YesPlayMusic
by qier222 javascript
14385 MIT
高颜值的第三方网易云播放器，支持 Windows / macOS / Linux :electron:
naive-ui
by TuSimple typescript
8568 MIT
A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
framework
by nuxt typescript
5586 MIT
The Hybrid Vue(3) Framework.
petite-vue
by vuejs typescript
5561 MIT
6kb subset of Vue optimized for progressive enhancement
h5-Dooring
by MrXujiang javascript
5202 GPL-3.0
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
windicss
by windicss typescript
4643 MIT
Next generation utility-first CSS framework.
FE-Interview
by lgwebdream javascript
3960 NOASSERTION
🔥🔥🔥 前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
vitepress
by vuejs typescript
3560 MIT
Vite & Vue powered static site generator.
ruoyi-vue-pro
by YunaiV java
3470 MIT
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序，支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能。你的 ⭐️ Star ⭐️，是作者生发的动力！
Top Authors in Vue
1
66 Libraries
16045
2
63 Libraries
20130
3
58 Libraries
440346
4
42 Libraries
4430
5
37 Libraries
22539
6
34 Libraries
1205
7
26 Libraries
296
8
25 Libraries
602
9
24 Libraries
1581
10
22 Libraries
8905
1
66 Libraries
16045
2
63 Libraries
20130
3
58 Libraries
440346
4
42 Libraries
4430
5
37 Libraries
22539
6
34 Libraries
1205
7
26 Libraries
296
8
25 Libraries
602
9
24 Libraries
1581
10
22 Libraries
8905
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:40The 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}
8then 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}
18Others 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}
30and 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
35When 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
40When 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
43I 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:58In 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
44It 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.
45Run 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
47Next, 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
48Your 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};
54tailwindcss.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};
66Finally, 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'
67QUESTION
Vue <script setup> Top level await causing template not to render
Asked 2022-Mar-24 at 09:09I'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>
24As 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:09Top-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>
34QUESTION
Horizontal full width with overflow in vertical flexbox
Asked 2022-Mar-20 at 07:17I'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.
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.
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:36Every 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}
125Full 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>QUESTION
Apollo Client "Named export 'remove' not found"
Asked 2022-Mar-12 at 09:45I'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)
18I 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})
30In 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:52Solved 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 // ...
42QUESTION
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:01Is 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:01Vue 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.
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:48please, I'm learning a VueJS 3 and I have probably begineer problem. I have warn in browser developer console like this one:
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.
2I'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>
26In 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>
56It 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]
71PS: 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:32The 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>
79QUESTION
Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin' Require stack:
Asked 2022-Feb-26 at 09:58I 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}
39Vue 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:04You 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
40And 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
41QUESTION
NuxtLink is updating route in nuxt 3 app, but not rendering contents
Asked 2022-Feb-25 at 18:25I 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>
15Folder Structure & Illustration:
ANSWER
Answered 2022-Feb-25 at 18:25The 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>
24The 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<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<template>
25 <div> 1️⃣ <!-- root node -->
26 <h1>Hello, World</h1>
27 <p>It's Nuxt3!</p>
28 </div>
29 <NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node -->
30</template>
31Technically, 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<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<template>
25 <div> 1️⃣ <!-- root node -->
26 <h1>Hello, World</h1>
27 <p>It's Nuxt3!</p>
28 </div>
29 <NuxtLink to="/user">User</NuxtLink> 2️⃣ <!-- root node -->
30</template>
31// index.vue
32<template>
33 <div> 👈 <!-- single root node -->
34 <div>
35 <h1>Hello, World</h1>
36 <p>It's Nuxt3!</p>
37 <div>
38 <NuxtLink to="/user">User</NuxtLink>
39 </div>
40</template>
41QUESTION
Vue 3 and Vuetify 3 Alpha: ValidationError: progress plugin invalid options
Asked 2022-Feb-14 at 09:55After 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 "instanceof" 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 "instanceof" 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 (<anonymous>)
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)
28ANSWER
Answered 2021-Nov-15 at 03:41I 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 "instanceof" 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 "instanceof" 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 (<anonymous>)
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 && vue -V && npm -v
29- v17.0.1
- @vue/cli 5.0.0-rc.0
- 8.1.0
QUESTION
Issue: Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
Asked 2022-Feb-09 at 00:16I 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
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:14https://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.
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
Get latest updates on Vue