Tailwindcss does not automatically reflect the changes in the browser - vue.js

Every time that I add a class, to see the changes I have to stop running nuxt, reload the vs code window and run "npm run dev" again. Then I can see the changes
My tailwind.config.js :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}'
],
theme: {
extend: {}
},
plugins: [require('daisyui')]
}
I place the tailwind.css file inside assets/css/tailwind.css
And import it inside my layout component: layouts/default.vue
My nuxt.config.ts:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/tailwind.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
}
}
})
My package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "3.0.0-rc.11",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"daisyui": "^2.31.0",
"firebase": "^9.10.0"
}
}

I think Nuxt.js is a framework that makes server-side rendering like NextJs for React.
In that way, all of the data and HTMLis rendered by the Nuxt server, which sends a generated "html/css" package to the client with only the css class that you used in your code.
So I would say it's normal to rebuild everytime you want to see your change for the css class you just add.
If you want to see directly the changes without rebuilding each time (like in the browser dev tool in order to write your css class easily), I would advise you to link in the HTML root file (index.html), the complete tailwind css sheet.
You can find a version on the tailwind doc page like this one : https://tailwindcss.com/_next/static/css/b606771d290f9908.css
Then you can remove the link at the end of your dev work.

Related

Nuxt Fatal Error TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined. Nuxt Js

When I try run npm run dev in my nuxt project. I get an error like this.
Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:02:57
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 21:02:57
at postcss8Module (node_modules/#nuxt/postcss8/dist/index.js:15:10)
at installModule (node_modules/#nuxt/kit/dist/index.mjs:435:21)
at async setup (node_modules/#nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (node_modules/#nuxt/kit/dist/index.mjs:167:5)
at async ModuleContainer.addModule (node_modules/#nuxt/core/dist/core.js:167:20)
at async ModuleContainer.ready (node_modules/#nuxt/core/dist/core.js:34:7)
at async Nuxt._init (node_modules/#nuxt/core/dist/core.js:342:5)
Package.json.
I just created a new nuxt project using "npm init nuxt-app myhealth"
{
"name": "myhealth",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^5.3.3",
"postcss": "^8.4.17"
}
}
Solve this problem with these steps:
Install the development dependencies again as instructed in the tailwind documentation
Remove '#nuxtjs/tailwindcss' and add '#nuxt/postcss8' to nuxt.config.js
Configure the nuxt.config.js build property by adding
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
Reference: https://tailwindcss.com/docs/guides/nuxtjs

How to add a typeorm in nuxt 3

I create an typeorm ESM project by running the command
npx typeorm init --name MyProject --database sqlite--module esm
as explained on https://typeorm.io. Running the project, everything works fine.
Then I create a nuxt 3 project: "npx nuxi init nuxt-project". Then I supplement the contents of the package.json and tsconfig.json files in the nuxt project with the appropriate typeorm values.
package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"start": "node --loader ts-node/esm src/index.ts",
"typeorm": "typeorm-ts-node-esm"
},
"devDependencies": {
"#types/node": "^18.11.17",
"nuxt": "3.0.0",
"ts-node": "10.9.1",
"typescript": "4.9.4"
},
"dependencies": {
"#npmcli/fs": "^3.1.0",
"reflect-metadata": "^0.1.13",
"sqlite3": "^5.1.4",
"typeorm": "^0.3.11"
}
}
tsconfig.json:
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"lib": [
"es2021"
],
"target": "es2021",
"module": "es2022",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"outDir": "./build",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true
}
}
I copy the entity, the configured data-source, the base and add code to the App.vue.
<script setup lang="ts">
import "reflect-metadata"
import { User } from "./db/entity/User.js"
import { AppDataSource } from "./db/data-source";
AppDataSource.initialize().then(async () => {
const user = new User()
user.firstName = "Timber"
user.lastName = "Saw"
user.age = 25
await AppDataSource.manager.save(user)
const users = await AppDataSource.manager.find(User)
console.log("Loaded users: ", users)
}).catch(error => console.log(error))
</script>
<template>
<div>
<NuxtWelcome />
</div>
</template>
I run a nuxt project and get an error:
[nuxt] [request error] [unhandled] [500] Column type for
User#firstName is not defined and cannot be guessed. Make sure you
have turned on an "emitDecoratorMetadata": true option in
tsconfig.json. Also make sure you have imported "reflect-metadata" on
top of the main entry file in your application (before any entity
imported).If you are using JavaScript instead of TypeScript you must
explicitly provide a column type.
Just in case, I add import reflect-metadata before the entity, but the error doesn't go away. I wonder if there is a good wizard who will guide me to the right path?
By the way, before that I tried to work with Sequelize, and also failed. It didn't fail on reflect-metadata, but:
Could not resolve "pg-hstore": const hstore = require("pg-hstore")
Any orm will work for me (that allows working with oracle, so Prisma is unfortunately out of the question). Any advice or an example?
Add to the User entity: #Column('text',{nullable:true}).

vite.config.js => Uncaught SyntaxError: Cannot use import statement outside a module

I created a new repo with $ npm install vue-app and created some test components.
When i run the command $ npm run dev the application starts in localhost port 3000.
I try to add my component in a WP website. When i build the files and add to my theme, i receive the message:
Uncaught SyntaxError: Cannot use import statement outside a module
I found some documentation for webpack but not for vite.config.js.
Anyone can help?
vite.config.js
// vite.config.js
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
package.json
{
"name": "vite-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.5"
}
}

Vue How to implement webpack and service-workers

currently, my vue app has a package.json like this:
{
"name": "App",
"version": "0.1.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
}
}
In my main.js I have this:
if(process.env.NODE_ENV == 'development')
Vue.prototype.$http.defaults.baseURL = 'http://127.0.0.1:8000/api'
else
Vue.prototype.$http.defaults.baseURL = 'https://api.example.net/api'
I would now like to use webpack to build my app and manage certain things.
What is the best way to integrate webpack into my project now and optimize it?
I would like to use a service-worker to inform the users about a new version every time and ask them to reload the page.
You don't need to integrate Webpack into a Vue CLI scaffolded project. Vue CLI uses Webpack under the hood.
To configure the underlying Webpack, create vue.config.js with a chainWebpack or configureWebpack property:
// vue.config.js
module.exports = {
configureWebpack: {
//...
},
chainWebpack: config => {
//...
}
}
Regarding the Service Worker, you could use the #vue/cli-plugin-pwa plugin, which can be added to a Vue CLI project with this command:
$ vue add pwa

Vue3 / Vite: How to package components for publishing on npm

I'm trying to export two web components in a public package on npm, using Vite with TypeScript.
Vite has a Library Mode (https://vitejs.dev/guide/build.html#library-mode) which works well. The ESM and UMD files are both being transpiled into my /dist directory. My question is how to export the web components in the entry point file.
I have an entry point file called export.js
import AwesomeHeader from './components/AwesomeHeader.vue'
import AwesomeFooter from './components/AwesomeFooter.vue'
export default { // I feel like the problem is here.
components: {
AwesomeHeader: AwesomeHeader,
AwesomeFooter: AwesomeFooter,
}
}
The idea is that I'll npm publish the project and use it like this.
npm i #sparkyspider/awesome-components #(ficticious example)
import {AwesomeHeader, AwesomeFooter} from '#sparkyspider/awesome-components' // does not find
(AwesomeHeader and AwesomeFooter are not found as exports in the node_module, even though the JavaScript files are referenced / found)
My package.json below:
{
"name": "#sparkyspider/awesome-components",
"version": "1.0.8",
"files": [
"dist"
],
"main": "./dist/awesome-components.umd.js",
"module": "./dist/awesome-components.es.js",
"exports": {
".": {
"import": "./dist/awesome-components.es.js",
"require": "./dist/awesome-components.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.2",
"#vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.3.3",
"vue-tsc": "^0.0.24"
},
}
You are having object { component: ... } as default export, instead of exporting AwesomeHeader and AwesomeFooter, which you try to import.
export { AwesomeHeader, AwesomeFooter } in export.js will work.
More on export: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
And you can't destruct default export: https://stackoverflow.com/a/43987935/8810271