I'm using tailwind v3 with Nuxt JS, while design the UI, I mostly use custom style arbitrary values of tailwind, e.g :
<div class="text-[#0074C9] text-5xl font-bold leading-[60px] py-2 tracking-[-0.022em] lg:mr-[90px]">
...
</div>
everything works fine when I run in development mode npm run dev but after build and run in production mode npm run start, all the custom styles didn't work (text-[#0074C9], leading-[60px], tracking-[-0.022em], lg:mr-[90px]).
is there something that I need to configure to make the custom style work in production mode?
I follow all the instruction here https://tailwindcss.com/docs/guides/nuxtjs, btw I use SASS, not CSS.
Thank you.
I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.
<div class="chat-container clearfix" id="chat">
<div class="people-list" id="people-list">
<chatlist-component></chatlist-component>
</div>
<div class="chat">
<router-view></router-view>
</div>
</div>
chat list component will load friend list from the server. Here is my app.js file;
Vue.use(VueRouter)
const router = new VueRouter({
routes,
linkActiveClass: "active"
});
import ChatComponent from './components/ChatComponent';
const routes = [
{ path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
];
Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
const app = new Vue({
el: '#chat',
router
});
And Chat list component template code
<li class="clearfix" v-for="user in users">
<img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
<router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
<div class="name">{{user.name}}</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</router-link>
</li>
It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.
app.js:19302 [Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
<Root>
app.js:19302 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
Thanks in advance
First, these errors only come out in non-production builds, however they indicate a problem that should be resolved before production release.
The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded. As I understand it, this can happen usually for one these reasons:
it is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
it is being loaded by something you include (e.g. vuetify, vue-test-utils, vue-cli-electron-builder) one way and by your webpack config another way (e.g. absolute vs relative paths, common.js vs esm.js vue files, runtime-only vue vs compiler+runtime vue)
If you click on that line (it was app.js:19302 in your output above) and put a breakpoint where the message is coming out, you can see the list of modules in the stack traceback to see if there's more than one path to Vue listed. For example, see that the top three modules have a different path below (but are all part of Vue):
If you see Vue showing up in two or more different ways, it demonstrates that more than one instance of Vue is loaded. Vue only supports a single instance, and can produce these error messages if more than one is loaded.
There are several links to issues included above, the Vuetify issue was the one I filed. In that case, Vuetify requires Vue and was loading it differently than I was. Usually the fix is to check your webpack config where Vue is specified (or isn't) and try to make it match the way the other copy is being included (e.g. absolute vs relative path, or packed vs external).
This error was happening to me because I was using Git submodules in my project and I had the following folders:
./node_modules - this is for the main project. There was vue installed in these node_modules.
./my_git_submodules/vue_design_system/node_modules - design system that provides basic components (also uses vue). Vue was also installed here!!
So because both:
./node_modules/vue and
./my_git_submodules/vue_design_system/node_modules/vue
existed, running npm run serve (vue-cli-service build underneath) built two instances of Vue. This was
a really nasty issue because it broke reactivity in certain cases
(ie. you click a button and nothing happens - you just get the
$listeners readonly error)
Quick fix:
removing node_modules in the child folder (vue_design_system) and running npm run serve worked for me.
Long term fix:
you'll probably need to make Webpack ignore nested node_modules folders by adding a rule in vue.config.js
Adding this to vue.config.js, worked for me.
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue'
}
}
}
I faced the same problem. For me, as I installed a local module using
yarn add ../somemodule --force
Seems this command will copy the whole module directory include the node_modules sub-directory. That causes the duplication of the same version of "vue" module. And in the browser devtool I can see multiple sources of the module.
For me, the solution is manually to delete the node_modules every time after install the local module.
In my case, I was migrating from a project that didn't use VueCLI. In that project, I imported vue from a CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>. In my Vue CLI project, I had copied and pasted my whole index.html file to the Public folder. Vue CLI has it's own way of importing vue so they were clashing. I simply removed the script and the problem was solved.
I had the same problem as above. I am using git submodules and I used
yarn add ./submodule
Somehow there ended up being a node_modules directory in the ./submodule directory and that confused everything.
And it was loading two Vue instances.
This can also happen because you are using npm link to use your unpublished vue packages. Basically identical to #walnut_salami explanation.
The fix for this problem is by moving to this way of including unpublished modules.
Looks like as if there are many possible answers.
I added a npm package manually to the node folder and the problem was the missing npm i command. After using the install command, everything worked fine.
In my case, this error arose after module federating my components.
I solved it by sharing vue in the component receiver to the component supplier.
e.g
webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "dashboard",
remotes: {
web_common: "web_common#http://localhost:8081/remoteEntry.js"
},
shared: {
vue: { // this solved my issue.
eager: true,
singleton: true,
requiredVersion: deps.vue
},
}
}),
]
}
My vscode vetur plugin is marking the first line of vue files as an error. This is the code using a completely blank .vue file template
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
However the <template> line is marked as an error. Here is the error message:
Argument of type '{}' is not assignable to parameter of type 'new (...args: any[]) => any'.
Type '{}' provides no match for the signature 'new (...args: any[]): any'. Vetur(2345) [1,1]
I have confirmed that vetur is the only plugin doing anything on .vue files by disabling all other plugins
My vscode info is here:
Version: 1.47.2
Commit: 17299e413d5590b14ab0340ea477cdd86ff13daf
Date: 2020-07-15T18:22:15.161Z
Electron: 7.3.2
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-42-generic
And I am using Vetur 0.25.0
I am completely stumped on what could be causing this. Not having intellisense and code completion due to this is driving me crazy
Disable experimantal template interpolation in veutr extenssion settings,
"vetur.experimental.templateInterpolationService": false
I did not spent time to figure out the root cause, but removing the .vscode folder solved it in my case.
This is an old issue, as you can see in this GitHub thread:
Vetur- Template interpolation error...
You can try one of the workarounds proposed there:
alukos commented on 27 Sep 2019
Or you can try to change Vetur config via settings or via vetur.config.js file
setting templateInterpolationService to false as #Jaideep Heer said.
"vetur.experimental.templateInterpolationService": false
Restart editor to take full effect, and the error should disappear.
Regards.
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
I'm developing a project using font-awesome and HarpJS. I'm just using the pre-compiled CSS version of font-awesome, but since I'm using bower it downloads even the LESS files to my components folder.
The problem is, when I need to compile my assets to a dist folder with harp compile, it gives me this error:
{
"source": "Less",
"dest": "CSS",
"filename": "/Users/***/lib/fontawesome/less/bordered-pulled.less",
"lineno": 4,
"name": "NameError",
"message": "variable #fa-css-prefix is undefined",
"stack": "// Bordered & Pulled\n// -------------------------\n\n.#{fa-css-prefix}-border {\n padding: .2em .25em .15em;\n border: solid .08em #fa-border-color;\n border-radius: .1em;\n}\n\n.pull-right { float: right; }\n.pull-left { float: left; }\n\n.#{fa-css-prefix} {\n &.pull-left { margin-right: .3em; }\n &.pull-right { margin-left: .3em; }\n}\n"
}
This error is happening because HarpJS is trying to compile the LESS files that came with the font-awesome's bower package. After some research, I found this answer, which points me to a page of the font-awesome documentation that says:
Page: http://fontawesome.io/get-started/#custom-less
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
Example:
#fa-font-path: "../font";
But I can't edit any file like this, since my dependencies are installed using bower and I don't check them in the repo. Even if I did check them in, that change would be overriden as soon as someone uses bower install to get an updated version of font-awesome.
What workaround would you use for this situation?
TIP: You can reproduce this just by doing:
$ mkdir test
$ cd test
$ bower init
$ bower install --save font-awesome
$ harp compile . dist
I just did some research around this issue and I believe the easiest way to fix this issue is by specifying a custom bower_components directory.
Found in this answer a way to do just that:
Create a file .bowerrc in the project root with the content:
{
"directory" : "_bower_components"
}
Run bower install again.
Harp doesn't compile directories/files that start with underscore (_), so if you name the directory _bower_components, it will successfully ignore it.
The problem with this approach is that those files will not be public, so you might have to create a new public file that imports the file(s) from font-awesome.
Something like:
#import "_bower_components/font-awesome/css/font-awesome.css"
There's a ticket open in harp’s issues where they're trying to find a way to ignore files or directories (similar to .gitignore), but it hasn't been implemented yet.
You might still have to figure out what to do with the font files. Hope it helps in any way to move you forward.