import FullCalendar from '#fullcalendar/vue'
throws
../../ullcalendar/vue in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],["babel-plugin-root-import",{"rootPathPrefix":"#","rootPathSuffix":"./resources/assets/js"}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/main/Dashboard.vue
Try '#/fullcalendar/vue' you need the have slash / after the # you can even do ../fullcalendar/vue or ./fullcalendar/vue depends on where your file is located. If that doesn't solve the problem check your package json if you have downloaded the fullcalendar and put the FullCalender into the components. But first look if you have installed the fullcalendar if not the a npm install once again.
export default {
components: {
FullCalendar
}
}
Related
How do we import js file from cdn?
I am building a custom component (a wrapper component) to view the pdf files. and for this I need to use pdf.js file from cdn and I am unable to import the file?
following does not work
import "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js";
To import the JS file from CDN and use in vue.js component, you can use mounted lifecycle and there you need to append your script into DOM.
Then it will be available into your window global variable.
Working code example:
mounted () {
let pdfJS = document.createElement('script')
pdfJS.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js')
document.head.appendChild(pdfJS)
// for checking whether it's loaded in windows are not, I am calling the below function.
this.checkPDFJSLib()
},
methods: {
checkPDFJSLib() {
console.log(window.pdfjsLib)
}
}
You can normally include it in your index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
Alternatively, you can use an npm library e.g vue-pdf
install it into your modules
npm install --save vue-pdf
and use it
import pdf from 'vue-pdf'
What is the correct way of loading vuetify into a package that i use in a vuetify project?
When serving projects it all seems to work fine but when i build the project i've got some issues with the css/sass
things i've tried:
With vuetify loader: the css is loaded twice so i can't overwrite sass variables
Without vuetify loader: the package doesn't have the vuetify css, so it looks horrible
Without vuetify loader with vuetify.min.css: the css is loaded twice so i can't overwrite sass variables, and the loaded css is all the css so it's huge
My package is called vuetify-resource, and this is the source code of the index.js (without the vuetify loader) At this point everything works on npm run serve But when i build the package doesn't have "access" to the vuetify css.
import Vue from 'vue';
import Vuetify from 'vuetify';
import VuetifyResourceComponent from './VuetifyResource.vue';
Vue.use(Vuetify);
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
To solve my issue i had to do a couple of things.
Make peer dependencies of vuetify and vue
add vuetify to the webpack externals, so when someone uses the package, the package uses that projects vuetify
not longer import vue and vuetify in the index.js it's not needed, the project that uses the package imports that
import the specific components that you use in every .vue file
for example:
Vue.config.js
module.exports = {
configureWebpack: {
externals: {'vuetify/lib': 'vuetify/lib'},
},
};
index.js
import VuetifyResourceComponent from './VuetifyResource.vue';
const VuetifyResource = {
install(Vue, options) {
Vue.component('vuetify-resource', VuetifyResourceComponent);
},
};
export default VuetifyResource;
part of the component.vue
import { VDataTable } from 'vuetify/lib';
export default {
name: 'vuetify-resource',
components: {
VDataTable
},
Step 4 in Ricardo's answer is not needed if you use vuetify-loader, it will do the job for you.
And I would modify step 2 to also exclude Vuetify's styles/css from your bundle. If you don't exclude them you can run into styling issues when the Vuetify version differ between your library and your application.
Use a regular expression in vue.config.js like this: configureWebpack: { externals: /^vuetify\// }. That way, only your own styles are included in the library bundle.
I searched all over the internet but found nothing. I know this is a noob question.
I installed jspdf and jspdf-autotable over npm in my vue project:
npm install jspdf --save
npm install jspdf-autotables --save
Packages installed successfully. I'm importing jspdf and jspdf-autotable in main.js file like that:
import jsPDF from 'jspdf';
import 'jspdf-autotable';
Vue.use(jsPDF)
Then in my .vue file I import jsPDF first:
import jsPDF from 'jspdf';
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
But autoTable is not imported. It says unresolved method or hook autotable. I get empty pdf.
I don't know how to import autoTable. Please help me. It's one day left to finish my job. Sorry I'm new to Vue js. Many thanks in advance!
Good question, but not necessary you use this in your main file, you can use this in your specific file (for performance reasons). The autotable is one complement to work with table in your JsPdf. This necessary only load the file in your component.
e.g.:
import JsPDFAutotable from 'jspdf-autotable'
and your component
components: { JsPDFAutotable }
you don't need the imports in the main.js file.
Do you import directly in your .vue file. that work well.
import jsPDF from 'jspdf'
import 'jspdf-autotable'
and then in mounted() hook:
let doc = new jsPDF();
doc.autoTable({ html: '#my-table' });
doc.save('table.pdf');
Current i have a vue project that is setup using webpack.
I would like to start using element UI for my ui library.
After I did
npm i element-ui -S
in my terminal
and added the code below in my app.js (entry point of whole app)
import Vue from 'vue'
import ElementUI from 'element-ui';
Vue.use(ElementUI);
I am able to start using and stuff throughout the app.
however, I notice that the CSS is not being applied.
What should I do with the css? How do I tell elementUI to apply the default theme?
This worked fine for me:
npm i element-ui
in main.js:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
if you like to localize, you should do:
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale })
or to set default size of elements to small:
Vue.use(ElementUI, { locale, size:'small' })
OK figured it out myself.
Looks like i just need to do
Install this npm package
Add import 'element-theme-default'; right after the elementUI import
I'm just getting started with react native and have created a base app with create-react-native-app.
I did some restructuring and made a few new folders and renamed the App.js to Home.js. I modified the app.json to contain an entry point that references the new Home.js file. When I load the app, nothing happens. There's no error, it just stays on the expo screen.
.
-components
-screens
-Home
Home.js
-config
-node_modules
-tests
app.json
app.json file:
{
"expo": {
"sdkVersion" : "23.0.0",
"entryPoint" : "./screens/Home/Home.js"
}
}
How do you define the entry point of the app?
if you are using Expo, you have to specify the entrypoint in your app.json file like this:
{
"expo": {
"entryPoint": "./src/app/index.js"
}
}
then, inside that file you need to register the app with Expo.registerRootComponent(YOUR_MAIN_APP_COMPONENT)
import Expo from 'expo'
...
class App extends Component {
...
}
export default Expo.registerRootComponent(App);
this way you can add your entry file wherever you want.
You need to update the app.json so that the entryPoint is the new path to the App.js.
{
"expo": {
"entryPoint": "./src/App.js",
...
}
}
However using Expo.registerRootComponent(App) causes the following error in SDK 32:
undefined is not an object (evaluating '_expo.default.registerRootComponent')
It can be fixed by importing registerRootComponent explicitly, rather than trying to access it via Expo.registerRootComponent.
Here is a sample App.js.
import { registerRootComponent } from 'expo';
class App extends React.Component {
...
}
export default registerRootComponent(App);
For Expo Projects
According to the current Expo documentation, if you want a different entry point than the App.js file, you can update the package.json - add a main field with the path to the desired entry point. Then inside the entry point file you'll have to also have to register the root component of the app. Expo was doing this automatically, when the entry point wasn't specified and was the App.js file
package.json
{
"main": "my/customEntry.js"
}
entryPointFile.js
import { registerRootComponent } from 'expo';
import MyRootComponent from './MyRoot';
registerRootComponent(MyRootComponent);
What if I want to name my main app file something other than App.js? - https://docs.expo.io/versions/latest/sdk/register-root-component/#what-if-i-want-to-name-my
If your project is in managed workflow setup (the default one), as stated in the doc, you must import the registerRootComponent and call it with your root component as argument, in the file you wish to be the main one:
import { registerRootComponent } from 'expo';
const AnyName() { ... } // Your root component
registerRootComponent(AnyName)
And then, in your package.json file, change the "main" to this file relative path, like
{
"main": "src/main.js"
}
I created project by react-native-script. In default entrypoint of app (App.js), you export App which import from your entry.
- node_modules
- App.js
- build
- main.js
File App.js:
import App from './build/main'
export default App
I also prefer to put all sources in a separated folder, for instance src/, and I found a different solution:
in my package.json, generated by expo cli, I see that main attribute is node_modules/expo/AppEntry.js.
I copied node_modules/expo/AppEntry.js to src/expoAppEntry.js and just changed the App import to import App from './App'; so it points to my *src/App.tsx`
then of course I changed the package.json main attribute to src/expoAppEntry.js.
See a working example here https://github.com/fibo/tris3d-app/blob/master/src/expoAppEntry.js
For those who are using Expo with typescript, you dont have to add .tsx at the end of the entrypoint in app.json. For example your entrypoint can be:
{
"expo": {
"entryPoint": "./app/components/AppEntryPoint/App.component",
"name": "Sample App",
...
}
...
}
In this example the name of entrypoint component is App.Component.tsx. But not mentioning the extension will also work. Apart from this, in the root component, writing export default registerRootComponent(AppComponent) or registerRootComponent(AppComponent) both should work as exporting a component from a file only means that other files can use it as well. Not writing it should not be an issue here because we have mentioned in app.json that this is the root component. App.json will look up and start building the structure of the app from there itself.
The entry point can be found in node_modules/expo/AppEntry.js..
This is in Expo Typescript...
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import App from '../../src/App';
registerRootComponent(App);
In this you can change your entry point. Initially it is set to App, Look the import statement where that component is coming from.