I was trying to use formkit with nuxt3.
I imported in the nuxt.config.ts like this:
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
modules: ['#formkit/nuxt'],
})
But when i try to use it in my components it is not recognize and drops an error:
and is not styled in the broswer
using a vue plugin worked for me
// file: plugins/formkit.ts
import { defaultConfig, plugin } from '#formkit/vue'
import config from '~~/formkit.config'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(plugin, defaultConfig(config))
})
Use this as your nuxt config.ts
export default defineNuxtConfig({
modules: ['../src/module', '#formkit/nuxt'],
formkit: {
configFile: '../formkit.config.ts',
},
myModule: {},
});
and formkit.config.ts
import { DefaultConfigOptions } from '#formkit/vue';
const config: DefaultConfigOptions = {
theme: 'genesis',
};
export default config;
Related
I have created a component as part of my component library that I am building with Vue3 and Vite. Everything works well, except when I try to use environment variables. I want the app that consumes this component library to be able to provide the component with environment specific data.
I have played around and found that if I have a .env file as part of the component library project, I am able to access those variables, but I want to be able to provide that during runtime and not during build time.
Here is my vite.config.ts
import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "#vitejs/plugin-vue";
import dts from "vite-plugin-dts";
export default ({ mode }) => {
return defineConfig({
optimizeDeps: {
exclude: ["vue-demi"],
},
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
],
server: {
open: true,
},
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "complib",
fileName: "complib",
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
exports: "named",
},
},
},
});
};
The entry looks like:
import { App, install } from "vue-demi";
import TestComp from "./components/TestComp.vue";
import "./tailwind.css";
install();
export default {
install: (app: App) => {
app.component("TestComp", TestComp);
},
};
export { Header };
And here is a minimal component TestComp.vue:
<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
console.log(import.meta.env.VITE_TEST_VAR);
});
</script>
<template>
<span>Test Comp</span>
</template>
I'm stuck on a problem that I had already encountered and which was resolved with the namespaced but nothing helped.
This is my module:
const Algo1Module = {
namespaced: true,
state: {
questions: {
question1: "test",
question2: "",
question3: "",
question4: "",
question5: "",
question6: ""
}
},
getters: {
getMyQuestions(state) {
return state.questions;
}
}
};
export default Algo1Module; // export the module
This is my index.js from my store:
import Vuex from "vuex";
import createLogger from "vuex/dist/logger";
import algo1 from "#/store/modules/algo1.store";
Vue.use(Vuex);
const debug = process.env.NODE_ENV !== "production";
export default new Vuex.Store({
modules: {
algo1
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
And i try to access to my getters from my component like this :
<script>
import { mapGetters } from "vuex";
export default {
name: "Algo",
computed: {
...mapGetters("Algo1Module", ["getMyQuestions"])
}
};
</script>
But i have an error message in console : [vuex] module namespace not found in mapGetters(): Algo1Module/
I don't understand or I may have made a mistake.
Thank you for the answer you can give me.
It will take name that you set up when imported module, try algo1
Your module name is registered under algo1 name.
If you want to call it Algo1Module then register it in the store like that:
modules: {
Algo1Module: algo1,
}
I'm looking for way to make the same logic of require.context of webpack in vitejs, I've found this plugin named vite-plugin-import-context, I tried it out but there's something that I didn't understand which is import dynamicImport from '../src/index' in the basic usage :
import { UserConfigExport } from 'vite';
import vue from '#vitejs/plugin-vue';
import dynamicImport from '../src/index';// <-- this is not described
export default (): UserConfigExport => {
return {
plugins: [vue(), dynamicImport(/*options*/)],
};
};
require should never be used in source code when using Vite. It's ESM only.
For Vite v2, import.meta.globEager can be used.
For Vite >v2, import.meta.globEager is deprecated. Use import.meta.glob('*', { eager: true }) instead.
import.meta.glob() is webpack alternative of require.context() . It has been added in vite since v2.3.4 .
Here is a link to the doc https://vitejs.dev/guide/features.html#glob-import
Yep, that example is directly taken from examples folder in the repo so it works only in that repo.
If you install the plugin via npm or yarn, the line should look like import dynamicImport from 'vite-plugin-import-context'
Here is how I import all the plugins/modules:
main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// styles here
import '#/assets/styles/tailwind.css';
import '#/assets/styles/main.scss';
// install all modules under `modules/`
Object.values(
import.meta.glob<{ install: (ctx: any) => void }>('/src/modules/*.ts', { eager: true })
).forEach((module) => module.install?.(app));
app.mount('#app');
and here is how I keep things ready in my modules folder to export:
modules/pinia.ts
import { createPinia } from 'pinia';
export const install = (app: any) => {
app.use(createPinia());
};
modules/router.ts
import type { RouteRecordRaw } from 'vue-router';
import { createRouter, createWebHashHistory } from 'vue-router';
import generatedRoutes from '~pages';
import { setupLayouts } from 'virtual:generated-layouts';
const routes: RouteRecordRaw[] = setupLayouts(generatedRoutes);
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export const install = (app: any) => {
app.use(router);
};
I am trying to use Vuex Store in my layout but can't figure out how to make it work.
Here is what I am doing:
store/sources.ts
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
import { store } from '#/store'
import axios from 'axios'
const { sourcesEndpoint } = process.env
interface Source {
id: String
}
#Module({
name: 'sources',
namespaced: true,
stateFactory: true,
dynamic: true,
store,
})
export default class Sources extends VuexModule {
private _sources: Source[] = []
get sources(): Source[] {
return this._sources
}
#Mutation
updateSources(sources: Source[]) {
this._sources = sources
}
#Action({ commit: 'updateSources' })
async fetchSources() {
// eslint-disable-next-line no-console
console.log(`!!! ${sourcesEndpoint} !!!`)
return sourcesEndpoint ? await axios.get(sourcesEndpoint) : []
}
}
store/index.ts
import { Store } from 'vuex'
export const store = new Store({})
layouts/default.vue
<script>
import { getModule } from 'vuex-module-decorators'
import Sources from '#/store/sources'
export default {
fetch() {
const sourcesModule = getModule(Sources, this.$store)
sourcesModule.fetchSources()
},
fetchOnServer: false,
}
</script>
And the error I get:
[vuex] must call Vue.use(Vuex) before creating a store instance.
You need to add Vue.use(Vuex), also, you are not including your module in the main store
import { Store } from 'vuex'
import { Sources } from './sources'
Vue.use(Vuex)
export const store = new Store({
modules: {
Sources
}
})
We;re trying to install the new vueI18n#next package with Quasar Framework for use with the Vue 2 and the Vue Composition API. The Vue I18n docs mention this:
import { createApp } from 'vue'
import { createI18n, useI18n } from 'vue-i18n'
// call with I18n option
const i18n = createI18n({
legacy: false,
locale: 'ja',
messages: { en: { ... } }
})
const App = {
setup() {
// ...
const { t } = useI18n({ ... })
return { ... , t }
}
}
const app = createApp(App)
app.use(i18n)
app.mount('#app')
When we're trying to translate that to a Quasar Framework boot file we get an error on the app.setup part:
import { boot } from 'quasar/wrappers'
import messages from 'src/i18n'
import Vue from 'vue'
import { createI18n, useI18n, VueI18n } from 'vue-i18n'
declare module 'vue/types/vue' {
interface Vue {
i18n: VueI18n
}
}
const i18n = createI18n({
legacy: false,
locale: 'en-us',
fallbackLocale: 'en-us',
messages,
})
Vue.use(i18n)
export default boot(({ app }) => {
// Set i18n instance on app
app.setup = () => {
const { t } = useI18n()
return { t }
}
})
Error:
What is the correct way to install this?
Quasar is still on Vue 2, not Vue 3. So we're now using the vue-i18n-composable package instead with this boot file:
import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n-composable'
import messages from 'src/i18n'
import VueI18n from 'vue-i18n'
declare module 'vue/types/vue' {
interface Vue {
i18n: VueI18n
}
}
const i18n = createI18n({
locale: 'en-us',
fallbackLocale: 'en-us',
messages,
})
export default boot(({ app }) => {
app.i18n = i18n
})