convert Vue3 Typescript to Vue3 Javascript - javascript

Hi i could you please help me to convert this into javascript in Vue3 thank you
import type { App } from 'vue'
import Screenfull from './Screenfull.vue'
const components = [
Screenfull,
]
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
}
export default install

Your plugin loops through a bunch of components and registers them globally, using the name property of the component. So make sure each component registered this way has a name property:
Dashboard.vue
<template>
<div>My component</div>
</template>
export default {
name: 'Dashboard' // ✅ Add this
}
Remove the typing from the install function:
const install = (app) => {
components.forEach(component => {
app.component(component.name, component)
})
}
Remove this line:
import type { App } from 'vue'

Related

How to use vue-toastification

I just migrated my project created in vue 3 to nuxt 3. Previously I used the vue-toastification module but now I don't know how to import it correctly. My code using this module.
import { useToast, POSITION } from 'vue-toastification'
const toast = useToast()
export default {
methods: {
copy(text) {
toast.success('Copied!', {
timeout: 2000,
position: POSITION.BOTTOM_CENTER,
})
navigator.clipboard.writeText(text)
}
}
}
In Vue I had to do app.use(Toast) but Nuxt does not have an index.js file. Adding modules: ['vue-toastification/nuxt'] in nuxt.config.js does not work because I get an error.
Answers suggested by kissu and Ricardo de Paula worked for me while I was using development server (npm run dev).
After building and running the project I encountered error 500:
Named export 'useToast' not found. The requested module 'vue-toastification' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'vue-toastification';
To fix this, I registered toast as plugin helper (I'm using Nuxt 3.1.1 with Nitro 2.1.1):
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import * as vt from 'vue-toastification'
import '#/assets/css/toast.scss'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vt.default)
return {
provide: {
toast: vt.useToast()
}
}
})
Then in my component script setup:
//throws an error after production build
//import { useToast } from 'vue-toastification'
//const toast = useToast()
//toast.success('Yay!!!')
//works after production build
const { $toast } = useNuxtApp()
$toast.success('Yay!!!')
If you want it to be available globally, you can install it as a Nuxt plugin as explained in the official docs or in this other answer.
vue-toastification is probably a client-side only plugin, hence you would probably want to use it as
/plugins/vue-toastificaton.client.js like this
import { defineNuxtPlugin } from '#app'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css" // if needed
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(Toast)
})
Then, you should be able to use it in your components with either Composition API or Options API (I think).
I was wanting to do the same thing. I read kissu's answer and did the following:
1 - I created a folder for the puglin - plugins
2 - Inside the plugins folder I created a file called vue-toastificaton.client.js
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css' // if needed
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Toast)
})
And I used it that way:
<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const onSubmit = () => {
// use the toast notification plugin to show a success message
toast.success('Hello world!')
}
</script>

Vue 3 TypeScript - Problem with `App.vue` in `main.ts` and Tests

I'm using TypeScript with Vue and I'm facing this error from my main.ts file.
Here's my shims-vue.d.ts file:
/* eslint-disable */
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
My App.vue is just a simple template without any script or style:
<template lang="pug">
router-view
</template>
I do not want to do the "noImplicitAny": false in tsconfig.js, so is there any solution to this problem apart from that?
Also, same thing happens in test cases,
import { shallowMount } from "#vue/test-utils";
import Layout from "#/plugin/layout/Layout.vue";
describe("Layout.vue", () => {
it("renders props.msg when passed", () => {
const wrapper = shallowMount(Layout);
expect(wrapper.text()).toMatch("sidebar");
});
});
Error is:
The reason for the error is that you named your vue file App.vue.js.
The solution: rename App.vue.js to App.vue

How to dynamically import CKEditor in Vue.js 3 only on client-side?

I am trying to include CKEditor 5 in my Vue.js 3 app but am struggling with including it only on client-side. I am using server-side rendering which cannot handle window that CKEditor uses, so it must only load only if the browser requests it, and not Node.js.
In the setup() method I can test for IsBrowser like this:
const IsBrowser = typeof window !== 'undefined';
How can I perform import and initialise a component only if IsBrowser is true?
I have to do the following code to make CKEditor-5 work:
<CKEditor v-if="IsBrowser" id="PostContent" class="ck-content" contenteditable="true" :editor="CKEditorInline" ></CKEditor>
<script>
import CKEditor from '#ckeditor/ckeditor5-vue/dist/ckeditor'
import CKEditorInline from '#ckeditor/ckeditor5-editor-inline/src/inlineeditor';
export default {
name: "ComponentCreate",
components: {
CKEditor: CKEditor.component
},
data() {
return {
CKEditorInline: CKEditorInline,
</script>
TLDR
Working solution (explanation is below):
<CKEditor v-if="IsBrowser && CKEditorInline"
id="PostContent"
class="ck-content"
contenteditable="true"
:editor="CKEditorInline"
></CKEditor>
<script>
import { ref, defineAsyncComponent } from 'vue';
export default {
name: "ComponentCreate",
components: {
CKEditor: defineAsyncComponent(() => {
return import('#ckeditor/ckeditor5-vue/dist/ckeditor')
.then(module => module.component)
})
},
setup() {
const IsBrowser = typeof window !== 'undefined';
let CKEditorInline = ref(null);
if (IsBrowser) {
import('#ckeditor/ckeditor5-editor-inline/src/inlineeditor')
.then(e => CKEditorInline.value = e.default)
}
return { IsBrowser, CKEditorInline }
},
};
</script>
There are two challenges here:
Conditionally load the <CKEditor> component
Conditionally load the CKEditorInline module's export
Conditionally Load <CKEditor> component
Use defineAsyncComponent to lazy load and register the component. It only loads and registers if the template actually renders it. So only when the v-if is true.
components: {
CKEditor: defineAsyncComponent(() => {
return import('#ckeditor/ckeditor5-vue/dist/ckeditor')
.then(module => module.component)
})
},
Extra challenge, not the module but the component property is needed in your case
Conditionally load CKEditorInline module export
For this dynamic module, we want the default export
let CKEditorInline = ref(null);
if (IsBrowser) {
import('#ckeditor/ckeditor5-editor-inline/src/inlineeditor')
.then(e => CKEditorInline.value = e.default)
}
Change the v-if condition
<CKEditor v-if="IsBrowser && CKEditorInline" :editor="CKEditorInline"></CKEditor>

How to Export Variables with a Dynamic Names

I have a components folder in nuxt.js
/components/atoms/
and inside that folder I have an index.js to export all components dynamically
const req = require.context('./', true, /\.vue$/)
const components = {}
req.keys().forEach(fileName => {
const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
components[componentName] = req(fileName).default
})
export const { ButtonStyled, TextLead, InputSearch } = components
so I can import perfectly as I wish
import { ButtonStyled } from "#/components/atoms"
the problem is that I am defining the variables to be exported statically, fixed, so for each created component I would need to add another variable manually
I need to dynamically export the variable name
Example:
DynamicCreation = ['ButtonStyled', 'TextLead', 'InputSearch']
export const { DynamicCreation } = components
// output -> export const { ButtonStyled, TextLead,InputSearch } = components
I need to export the name of already unstructured variables
Note: I can not use this export default components because I can not import like this import { ButtonStyled } from "#/components/atoms"
You should be able to do it like this:
export default components
Then in your file where you want to use the components:
import * as components from '#/components/atoms'
Then when you need to use the components in your Vue files, you need to map them:
#Component({
components: {
ButtonStyled: components.ButtonStyled
}
})
And now you have:
<ButtonStyled></ButtonStyled>
You can make something like this way, check if is what do you need.
Create a file to import a conjunct of components: allComponents.js
export default {
componentOne: require('./passToOneComponent.js');
componentTwo: require('./passToOneComponent.js');
componentThree: require('./passToOneComponent.js');
}
After in index.js export the allComponents.js with the name that you wish:
export {default as SomeName } from 'allComponents.js';
So in the final file, you can make something like:
import { SomeName } from 'index.js';
SomeName.componentOne();
I created a library that does this type of export, anyone who wants can install via npm
I created a Webpack Plugin that makes named exports from a component, maybe this helps other people
Weback Plugin - named-exports

Export custom javascript file to a Vue component

I am a beginner in Vue.js and so this question might be duplicate or naive. I want to call functions defined in a custom javascript file within a Vue component. I did something like this.
custom.js
class API{
function testCall(){
alert("test ok");
}
}
export {API}
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<testcomponent :on-click="getData">
</testcomponent>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import TestComponent from './components/TestComponent.vue';
import API from './js/custom.js';
export default {
name: 'app',
components: {
HelloWorld,
TestComponent,
API
},
methods: {
getData(){
const apiObj = new API();
apiObj.testCall();
}
}
}
</script>
When I build using npm run build, I get below error.
Any help with this please?
1: To define methods in a class you do not need function keyword.
class API{
testCall(){
alert("test ok");
}
}
2: Since you are doing a named export using export {API}, your import statement should be
import {API} from './js/custom.js';
3:components options is for registering vue components locally. Since API is not a vue component remove it from the components option.
API is not a Vue component - you should not include it inside the components branch. Also, if this is just a bunch of utility functions you can either export them one by one or as a containing object
// util.js - individual functions
export function testCall (call) {};
export function testUser (user) {};
// Vue app
import { testCall, testUser } from 'util.js';
// util.js - object group
function testCall (call)
{
}
function testUser (user)
{
}
export default
{
testCall,
testUser
}
// Vue app
import API from 'util.js';

Categories

Resources