I am trying to learn NativeScript-VUE and following this tutorial to connect SQLite to NativeScript.
Following commands were issued.
vue init nativescript-vue/vue-cli-template vuex-project
cd vuex-project
npm install
Everything ended up without any errors.
But vuex-project directory structure doesn't have an "src" folder to go ahead with the tutorial. Should we have to manually create them?
Edit:
The tutorial I am following is https://www.nativescript.org/blog/data-management-with-sqlite-and-vuex-in-a-nativescript-vue-app
I do not know which tutorial you are following. But the command that you are using,that does not create a src folder. You can find App.vue file inside vuex-project/app/components.
You can also have a look tsconfig.json that will show you
"paths": {
"#/*": [
"app/*"
]
},
The tutorial you are referring to, is over a year older. It should have been built on the earlier version of CLI template, the latest version uses app instead of src.
Related
I just installed a fresh copy of Laravel 9 and added these lines to vite.config.js
build: {
outDir: '.dist',
}
In Laravel we already have a public folder containing robots.txt and favicon.ico. As per documentation and answers here like this one, I was expecting that "npm run build" will copy the contents from this directory to .dist directory, but this does not seem to happen. I can see only manifest file and assets folder containing js and CSS and no robots.txt and no faviocn.ico. Am I doing something wrong??
I try to create own laravel package.
I created package folder in my project in root directory.
Than created simplexi/greetr/src folders in package.
I added to autoload "Simplexi\Greetr\": "package/simplexi/greetr/src" in composer.json in main project, and used command composer dump-autoload.
Than in src folder I created RiakServiceProvider, added this provider to config=>app.php to providers array.
Then in boot method I added next code:
$this->publishes([__DIR__ . '../config/myconf.php' => config_path() . '/']);
And executed next command:
php artisan vendor:publish --provider="\Simplexi\Greetr\RiakServiceProvider"
Than I got Publishing complete.
But file myconf.php didn't copy to app/config.
Also I checked file myconf.php in my package/simplexi/greetr/config folder and it exists.
Can anyone tell me what the problem might be?
publishes() expect two parameters. Try something like this:
$this->publishes([
__DIR__.'/../config/myconf.php' => config_path('myconf.php'),
], 'config');
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
I'm building something using the Electron framework. I'm using Vue and SCSS, and I'd like to use Laravel Mix.
However, I can't figure out how to use Laravel Mix without ES6 compilation using babel. Since Electron is running on Node, there is no need to compile to ES5.
Looking through Laravel Mix's API, there seems to be no method that provides this functionality.
I created a .babelrc file with the following contents:
{
"plugins": [ ],
"presets": [ ]
}
However, after running npm run dev, the output file clearly has been transpiled to ES5.
According to line 248 of src/config.js in Laravel Mix's source code, the options taken from .babelrc overwrite the default options defined on line 220.
Laravel Mix Version: 1.7.2
Is there something I'm missing? Or does Laravel Mix simply not support this functionality?
Thanks in advance.
I had similar problem and it wasn't easy to find, but here's the solution:
mix.babelConfig({
only: ["./some-fake-dir"]
})
As the Babel documentation says:
Use it to explicitly enable Babel compilation of files inside the src
directory while disabling everything else.
So by entering some fake dir, you turn off the compilation all together.
More on this option here: https://babeljs.io/docs/en/options#only
I'm quite new to managing assets in any other way than a direct download, and copying the required files to a designated folder and simply referencing this. However, I wish to keep my assets "close to the framework" and therefore hope to get some clarity regarding how it is done in Laravel.
I am using Laravel v5.4 and NPM v5.3.0
I want to use the Sweet Alert library and so did
npm install sweetalert
which placed the files in the node_modules directory and package.json as expected
This is where the confusion begins. I then did
npm install --no-bin-links
(the no-bin-links flag recommended for Windows hosts by the docs)
and
npm run dev
thinking this would compile/minify the library to my app.js or vendor.js (which does not exist), or at least do some magic to let me use the library.
The output states:
DONE Compiled successfully in 8551ms
which suggests to me that I have simply failed to include the Sweet Alert library in this process.
PHPStorm does suggest the library as an auto-complete option, but the application fails to load the library, stating in the JS Console on load:
jQuery.Deferred exception: swal is not defined ReferenceError: swal is not defined
I have also tried "require"-ing the library in bootstrap.js, stating:
window.swal = require('sweetalert');
or simply
swal = require('sweetalert');
Where 'sweetalert' again is suggested by the IDE autocomplete.
Here is how I attempted to use it:
$( document ).ready(function () {
alert("Hello!"); //works
swal({
title: "Hello!",
text: "Hellooo",
type: "error",
confirmButtonText: "OK THEN"
});
});
Which throws the error mentioned above.
I also tried initializing using
window.swal({...
sweetAlert({...
which fail.
What am I missing? And how are you supposed to use NPM packages in a Laravel project/what are the best practices?
Any help is greatly appreciated.
You need to add a reference to your sweetalert vendor file in your webpack.js config file.
mix.scripts('/vendor/..../sweetalert2.min.js', '/public/js/sweetalert.min.js');
That will copy it from your vendor folder to your public folder when you run
npm run dev