Comments (10)
@sxshateri How are you loading Alpine, via the CDN?
from alpine-clipboard.
@ryangjchandler nope its part of the TALL stack.
from alpine-clipboard.
@sxshateri Can you post an example please. The TALL stack won't determine how it's loaded.
from alpine-clipboard.
The TALL stack won't determine how it's loaded.
@ryangjchandler that's exactly my issue. not sure how the TALL stack loads the Alpine but its definitely not using the laravel mix since there is no import of alpine js in the app.js nor laravel mix config file.
app.js
require('./bootstrap');
var Turbolinks = require("turbolinks");
Turbolinks.start();
import Clipboard from "@ryangjchandler/alpine-clipboard";
Alpine.plugin(Clipboard);
wbpack.mix.js
const mix = require("laravel-mix");
require("laravel-mix-tailwind");
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js("resources/js/app.js", "public/js/app.js")
.sass("resources/sass/app.scss", "public/css/app.css")
.tailwind("./tailwind.config.js")
.sourceMaps();
if (mix.inProduction()) {
mix.version();
}
please note that the alpine clipboard is installed using npm and its available but since i cant load it before the alpine i get the error.
from alpine-clipboard.
How are you including Alpine on the page?
from alpine-clipboard.
@ryangjchandler its in the compiled js assets in public/js/app.js
it is pre-added to the project by {{ url(mix('js/app.js')) }}
from alpine-clipboard.
The latest version of this package supports Alpine 3.x and greater. Please follow the Alpine installation instructions first.
from alpine-clipboard.
@ryangjchandler alpime is installed and compiled as part of the TALL stack package and as per your documentation I just need to install the package using npm and add it to the webpack by adding the
import Clipboard from "@ryangjchandler/alpine-clipboard"
Alpine.plugin(Clipboard)
And I did so but I'm getting the following error in the console
Uncaught (in promise) ReferenceError: $clipboard is not defined
at eval (eval at generateFunctionFromString (module.esm.js:1)
What am I doing wrong?
from alpine-clipboard.
The code you provided doesn't show me how you've got Alpine installed. That's why I'm struggling to help.
I'm guessing that Alpine is being imported inside of the bootstrap.js
file?
from alpine-clipboard.
@ryangjchandler it indeed was. i never look into that because I could never imagine the alpine was imported into bootstrap.js
then it was imported to webpack. it is a very odd and unorthodox way of doing it if you ask me.
Anyways adding the alpine clipboard into the bootstrap.js
fixed the issue. that's to you for mentioning it because if it was not because of you I would never look into that.
from alpine-clipboard.
Related Issues (16)
- Allow passing in closure
- Allow passing through mime type when copying
- Alpine Error: "TypeError: Cannot read property 'writeText' of undefined" HOT 2
- $clipboard(dataelement) gives writeText error HOT 1
- Copy tables? HOT 3
- Livewire support without `wire:model` HOT 7
- Doesn't work on the mobile version of safari HOT 3
- Inline onCopy hook HOT 5
- html specialchars HOT 1
- Adding to filament HOT 2
- Package HOT 1
- Add support for modern Clipboard API
- Clipboard not working on first click in windows HOT 5
- Multiline text not copying HOT 2
- Add permissions check
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alpine-clipboard.