I am still very much at the start of a new project using nuxt3. I installed tailwindcss for quick themeing and prototyping. I followed the basic setup on the documentation for the tailwindcss plugin for nuxt 3.
The problem is, that the background color for the welcome message is not applied (the CSS property also does not show up on the rendered HTML). When I change the CSS to something like this: class="bg-green-200", then it works.
I could not find any similar issues, however I'm sure I can't be the first/only one stumbling over this. I appreciate any hints.
**Edit: ** The issue was the import syntax in the tailwind configuration file. Changing the import to the require syntax solved the issue.
My code is as follows:
nuxt.config.js
export default defineNuxtConfig({
modules: [
'#nuxtjs/robots',
'#nuxtjs/color-mode',
'#nuxtjs/tailwindcss',
'#nuxtjs/i18n',
],
i18n: {
locales: [
{
code: 'de', name: 'Deutsch', iso: 'en-US', file: 'de.js'
},
{
code: 'en', name: 'English', iso: 'de-CH', file: 'en.js'
},
],
defaultLocale: 'de',
strategy: 'prefix_except_default',
langDir: 'languages',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root', // recommended
},
},
buildModules: [],
robots: {},
tailwindcss: {
configPath: 'tailwind.config.js',
exposeConfig: false,
injectPosition: 0,
}
})
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
theme: {
extend: {
colors: {
primary: defaultTheme.colors.green
}
}
}
}
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<template>
<div>
<LayoutHeader/>
<slot />
<LayoutFooter/>
</div>
</template>
pages/index.vue
<template>
<div>
<div class="bg-primary">Welcome to the homepage</div>
</div>
</template>
The main issue being that tailwind.config.css is not a valid configuration file because we're using JS here, hence why npx tailwindcss init is the recommended way to safely generate the configuration file (the config itself is a JS file, not a CSS one).
I have successfully installed it with the following tailwind.config.js file
const colors = require('tailwindcss/colors')
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
theme: {
extend: {
colors: {
primary: colors.green
}
},
},
}
Here is a reference to the documentation: https://tailwindcss.com/docs/customizing-colors#naming-your-colors
Here is a working github repo.
Related
My folder structure looks like this:
/components
/sections
/ImageGrid
ImageGrid.vue
/ContactSection
ContactSection.vue
Within the Vue files I register the components with the name key. The name is equal to the file name ("ImageGrid").
When I use <component is="ImageGrid" /> I get the following error:
[Vue warn]: Unknown custom element: <ImageGrid> - did you register the component correctly?
I tried adding the following lines to the Nuxt.config:
{ path: '~/components/sections', extensions: ['vue'] },
// Or:
{ path: '~/components/sections/**/*', extensions: ['vue'] },
How should the Nuxt.config be configured?
This works with the following configuration in nuxt.config.js
export default {
components: [
{ path: '~/components/sections', extensions: ['vue'] }
],
}
Any given page
<template>
<div>
<component :is="componentId" />
<button #click="swapComponents">SWAP THEM!</button>
</div>
</template>
<script>
export default {
data() {
return {
componentId: 'ImageGrid',
}
},
methods: {
swapComponents() {
this.componentId === 'ImageGrid'
? (this.componentId = 'ImageRow')
: (this.componentId = 'ImageGrid')
},
},
}
</script>
And the following structure
A demo can be seen here: https://share.cleanshot.com/dE2nFr
An official answer can be found here: https://github.com/nuxt/components/issues/227#issuecomment-902013353
Update: this simpler version also works of course
<template>
<component :is="'ImageGrid'" />
</template>
i'm new to vue js an wanted to write a fancy little demo.
I was trying to use tailwindcss in a new project.
I've created the project with
vue create vue-tailwind-template
and added tailwind with
vue add tailwind
I removed the demo component "helloworld" an all styles. In App.vue i try to use an div with class "bg-red", but no red background in output. These are my project files. Does anybody see the problem? Thank you in advance.
Sven
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div class="bg-red"><p>Hallo</p></div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
createApp(App).mount('#app')
Problem solved.
Classname "bg-red" doesn't exist. I had to use a number to define color intensity, e.g. "bg-red-500"
I am using vis.js timeline in a Vue.js project. Although it seems pretty easy to customize the locale using vanilla javascript (see codepen and documentation), I just can't get it done with Vue. I have already added moment.js and moment-with-locales-es6 to my project. Is this the right way to apply the locale to moment.js so it also applies to vis timeline?
This is my vue.js component:
<template>
<div className="wrapper">
<div id="visualization"></div>
</div>
</template>
<script>
import {Timeline} from 'vis-timeline/standalone';
import tr from 'moment/locale/tr'
import moment from "moment-with-locales-es6";
export default {
data() {
return {
items: [
{
id: 1,
content: "1",
start: new Date(2021, 2, 23),
group: 0
},
options: {
locale: "tr",
locales: {
tr: {
current: "geçerli",
time: "kere",
},
},
},
timeline: null
}
},
mounted() {
this.timeline = new Timeline(document.getElementById('visualization'));
this.timeline.setOptions(this.options);
this.timeline.setItems(this.items);
moment.locale('tr')
}
}
</script>
I managed to do it by adding this to my index.html file:
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/tr.js'></script>
I am pretty sure there's a better solution for this...
I tried to use vue2-editor. so when i tried with basic process which is in the documentation
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
it gives me reference error document is not defined...
so then i tried to use it as plugin...in plugin, i defined
import Vue from "vue";
import { VueEditor } from "vue2-editor";
Vue.use(VueEditor);
and in nuxt.config.js
plugins: [
{ src: '~/plugins/vueditor', mode: 'client'},
]
now it doesnt show any error but editor doesnt show up.
i have also tried with { src: '~/plugins/vueditor', mode: 'client', ssr: false},
anyone who can help me with this.?
I am writing code by Vue3 and Typescript, and this is the code of App.vue, which is the root component:
<template>
<router-view v-if="inited" />
<div v-else>
Initing...
</div>
</template>
<script lang="ts">
import router from './router';
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { key } from './store';
const store = useStore(key);
export default defineComponent({
data() {
return { inited: store.state.inited };
},
});
</script>
But the eslint tell me:
/home/peter/proj/skogkatt-next/src/App.vue
17:9 error Parsing error: '}' expected
I use many time on Google and so on, but still cannot find a useful solution. This is the config of eslint in package.json:
{
// ...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"parserOptions": {
"parser": "#typescript-eslint/parser"
},
"rules": {
"#typescript-eslint/camelcase": "off"
}
},
// ...
}
I am not sure which config is useful or not, so I post those out. Thanks.
The error is caused by "plugin:#typescript-eslint/recommended", which sets the top-level parser, which collides with Vue's vue-eslint-parser. In addition, your own config duplicates the top-level parser setting already set in the plugin, and should also be removed.
Vue's ESLint config for TypeScript projects addresses this problem, so consider copying it:
module.exports = {
plugins: ['#typescript-eslint'],
// Prerequisite `eslint-plugin-vue`, being extended, sets
// root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
// in turn delegates to the parser, specified in `parserOptions.parser`:
// https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
parserOptions: {
parser: require.resolve('#typescript-eslint/parser'),
extraFileExtensions: ['.vue'],
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:#typescript-eslint/eslint-recommended'
],
overrides: [{
files: ['*.ts', '*.tsx'],
rules: {
// The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
// does not work with type definitions
'no-unused-vars': 'off',
}
}]
}
Another option is to generate a TypeScript project with Vue CLI, and copying the resulting ESLint config.
I think it should be:
import { router } from './router';
Check if you have eslintConfig specified in both package.json and separate eslint config file. Both of these conflict and give this inconsistent state.
Its best to remove eslintConfig from package.json and move those to eslint config file.